﻿@charset "utf-8";

.hanpukai_wrapper {
    width: 100%;
    margin: auto;
    padding: 50px 0;
}

.hanpukai_cont {
    max-width: 1180px;
	margin:0 auto;
}

.sea_w {
  position: relative;
  left: 50%;
  right: 50%;

  width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  background-image:url("../../img/pages/hanpukai/pc/taku_bg.jpg");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:100% auto;
  padding-bottom:50px;
}

.enone {
  display:none!important;
}

h2 {
    text-align: center;
    font-size: 36px;
	max-width:1180px;
    font-family:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif;
	border:none!important;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0.08em;

    color: #3f352b;
    margin:0 auto 50px;
}

.hanpukai_wrapper .d01 {
	max-width:1180px;
    display: flex;
    gap: 50px;
	margin:0 auto 3px;
    padding: 0 0 15px 20px;
    font-size: 16px;
    border-bottom: 1px solid #d8d0c8;
}

.hanpukai_wrapper .d01 p {
    position: relative;
    width: auto;
    margin-bottom: 0;
}

.hanpukai_wrapper .d01 p::before {
    position: absolute;
    content: "●";
    left: -20px;
}

.hanpukai_wrapper p.green{
    font-size:16px;
}

.hanpukai_wrapper p.blue{
    font-size:16px;
}

.hanpukai_wrapper .green::before {
    color: #708b4a;
}

.hanpukai_wrapper .blue::before {
    color: #3f5f8f;
}
h3 {
	border:none;
}
.hanpukai_wrapper .d02 > div h3.green::before,
.title_bold .maru_green {
    color: #708b4a !important;

}

.hanpukai_wrapper .d02 > div h3.blue::before,
.title_bold .maru_brue {
    color: #3f5f8f !important;
}

.hanpukai_wrapper .d02 {
    margin-bottom: 20px;
}

.hanpukai_wrapper .d02 > div {
    width: 100%;
}

.hanpukai_wrapper .d02 > div h3 {
    width: 100%;
    position: relative;
    font-size: 28px;
    font-weight: bold;
    padding-left: 32px;
}

.hanpukai_wrapper .d02 > div h3.green {
    color: #708b4a;
}

.hanpukai_wrapper .d02 > div h3.blue {
    color: #3f5f8f;
}

.hanpukai_wrapper .d02 > div h3.green::before,
.title_bold .maru_green {
    color: #708b4a !important;
}

.hanpukai_wrapper .d02 > div h3.blue::before,
.title_bold .maru_brue {
    color: #3f5f8f !important;
}

.hanpukai_wrapper .d02 > div h3::before {
    position: absolute;
    content: "●";
    left: 0;
}

.hanpukai_wrapper .d02 > div h3 span {
    display: block;
    font-size: 15px;
    color: #2d2d2d;
	font-weight:normal;
    margin-left: -32px;
}

/* 頒布会コンテンツ */

.hanpukai_flexbox {
	max-width:1180px;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    gap: 20px;
	margin:0 auto;
}

.hanpukai_flexbox > div {
    width: 100%;
    padding: 20px;
}

/* 8食 */
.hanpukai_flexbox_8 {
    background: #f2f5ee;
    border-radius: 18px;
}

/* 16食 */
.hanpukai_flexbox_16 {
    background: #f3f5f7;
    border-radius: 18px;
}
.hanpukai_flexbox_8 .inner,
.hanpukai_flexbox_16 .inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 25px;
}

.hanpukai_flexbox_8 .inner:last-of-type,
.hanpukai_flexbox_16 .inner:last-of-type {
    margin-bottom: 0;
}

.hanpukai_flexbox_8 .inner > div:nth-of-type(1),
.hanpukai_flexbox_16 .inner > div:nth-of-type(1) {
    width: 40%;
}

.hanpukai_flexbox_8 .inner > div:nth-of-type(2),
.hanpukai_flexbox_16 .inner > div:nth-of-type(2) {
    flex: 1;
}

.title_bold,
.title_bold p {
    font-weight: 700 !important;
    font-size: 18px !important;
    line-height: 1.4;
    color: #3b332c;
    margin-bottom: 10px;
}
.title_bold p span:first-child {
	padding-left:3px;
}
.inner .text {
    font-size: 16px;
    line-height: 1.4;
    color: #5f564d;
}
.inner img{
    border-radius:12px;
}

footer a:link {
    text-decoration: none !important;
    color: #333333 !important;
}

footer a:visited {
    text-decoration: none !important;
    color: #333333 !important;
}

footer a:hover {
    text-decoration: none !important;
    color: #f00 !important;
}

footer a:active {
    text-decoration: none !important;
    color: #ccf !important;
}

/* プラスワン商品 */

.hanpukai_plus_one__wrapper {
    margin: 50px 0 30px;
}

.hanpukai_plus_one__wrapper h3 {
    text-align: center;
}

.hanpukai_plus_one__border {
    width: 100%;
    max-width: 900px;
    margin: -50px auto 50px;
    border: 2px solid #c8384d;
    padding: 45px 30px 30px;
}

.hanpukai_plus_one__wrapper h3 img {
    width: 90%;
    max-width: 600px;
}

.hanpukai_plus_one__point {
    display: flex;
    gap: 30px;
    margin: 0 auto 20px;
}

.hanpukai_plus_one__point_le {
    background: #e48e00;
    display: flex;
    align-items: center;
    width: 200px;
    font-size: 1.8rem;
    color: #fff;
    font-weight: bold;
    justify-content: center;
}

.hanpukai_plus_one__point_ri {
    padding: 5px 0;
}

.hanpukai_plus_one__point_ri li {
    font-size: 1.9rem;
    font-weight: bold;
    color: #c8384d;
    line-height: 1.3;
    padding-left: 25px;
    position: relative;
}

.hanpukai_plus_one__point_ri li::before {
    content: "";
    width: 12px;
    height: 12px;
    border: 2px solid #c8384d;
    border-radius: 50px;
    position: absolute;
    top: 5px;
    left: 0;
}

.hanpukai_plus_one__point_ri p {
    font-size: 1.3rem;
    color: #2d2d2d;
    display: block;
    line-height: 1.2;
    margin-top: 5px;
}

.hanpukai_plus_one__wrapper .inner {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: auto;
}

.hanpukai_plus_one__wrapper .inner div:nth-child(1) {
    width: 330px;
}

.hanpukai_plus_one__wrapper .inner div:nth-child(2) {
    flex: 1;
}

.hanpukai_plus_one__wrapper .title_bold {
    font-size: 2.4rem !important;
    padding: 5px 0;
}
.hanpukai_plus_one__wrapper .title_bold p {
    margin:0;
    padding:0;
}


/* 価格改定 */

.price_table {
    border: 1px solid #aaa;
    margin-bottom: 3rem;
}

.price_table th {
    padding: 10px 20px;
    border: 1px solid #aaa;
    text-align: center;
    background: #eee;
}

.price_table td:nth-child(1) {
    
}

.price_table td:nth-child(2),
.price_table th:nth-child(3) {
    text-align: center;    
}

.price_table td {
    padding: 10px 20px;
    border: 1px solid #aaa;
}

.hanpukai_wrapper .d02 > div h3.green {
    color: #708b4a;
}

.hanpukai_wrapper .d02 > div h3.blue {
    color: #3f5f8f;
}

.hanpukai_wrapper .d02 > div h3.green::before,
.title_bold .maru_green {
    color: #708b4a !important;
}

.hanpukai_wrapper .d02 > div h3.blue::before,
.title_bold .maru_brue {
    color: #3f5f8f !important;
}

.inner-plusone{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

.inner-plusone > div:nth-child(1){
    width:330px;
}

.inner-plusone > div:nth-child(2){
    flex:1;
    min-width:0;
}

.inner-plusone .title_bold{
    white-space:nowrap;
	font-size:26px!important;
}
.inner-plusone p.text {
	font-size:19px!important;
}

@media screen and (max-width: 1200px) {
	.hanpukai_cont,.hanpukai_flexbox,.d01 {
		width:95%;
	}
	.d01 {
		width:97%;
	}

	.sea_w {
		background-image:none;
	}

}

/* タブレット *********************************************************************************************************/
@media screen and (max-width: 960px) {

    .hanpukai_wrapper {
        padding: 50px 20px;
    }

    h2 {
        font-size: 4.1vw;
        margin-bottom: 50px;
    }

    .hanpukai_flexbox {
        display: block;
    }

    .hanpukai_flexbox_8 {
        margin-bottom: 20px;
    }

    .hanpukai_flexbox_16 {
        margin-bottom: 0;
    }

    .hanpukai_wrapper .d02 > div h3 span {
        font-size: 18px;
    }

    .title_bold,
    .title_bold p {
        font-size: 24px !important;
    }

}







/* スマホ *************************************************************************************************************/
@media screen and (max-width: 768px) {

    .hanpukai_wrapper {
        padding: 40px 20px 20px;
    }

    h2 {
        font-size:clamp(20px, 5.3vw, 24px);
        margin-bottom: 30px;
    }

    .hanpukai_wrapper .d01 {
        display: block;
    }

    .hanpukai_wrapper .d02 > div h3 {
        font-size: 22px;
    }

    .hanpukai_wrapper .d02 > div h3 span {
        font-size: 14px;
    }

    .inner {
        display: block;
    }
	.inner img {
		padding-top:10px;
	}
	.hanpukai_flexbox_8,.hanpukai_flexbox_16 {
		padding:10px 10px!important;
	}
    .hanpukai_flexbox_8 .inner > div:nth-of-type(1),
    .hanpukai_flexbox_16 .inner > div:nth-of-type(1) {
        width: 35%;
    }

    .hanpukai_flexbox_8 .inner > div:nth-of-type(2),
    .hanpukai_flexbox_16 .inner > div:nth-of-type(2) {
        margin-top: 3px;
    }

    .title_bold, .title_bold p {
        font-size: 16px !important;
    }
	
	.hanpukai_plus_one__wrapper {
		margin: 30px 0;
	}
	
	.hanpukai_plus_one__wrapper h3 img {
		width: 95%;
	}
	
	.hanpukai_plus_one__border {
		padding: 30px 20px 20px;
		margin-top: -27px;
        margin-bottom: 0;
	}
	
	.hanpukai_plus_one__point {
		display: block;
	}
	
	.hanpukai_plus_one__point_le {
		background: #e48e00;
		display: block;
		width: 100%;
		font-size: 1.6rem;
		color: #fff;
		font-weight: bold;
		text-align: center;
		margin-bottom: 10px;
		padding: 7px 0;
	}
	
	.hanpukai_plus_one__point_ri li {
		font-size: 1.8rem;
	}
	
	.hanpukai_plus_one__point_ri li::before {
		width: 10px;
		height: 10px;
		left: 3px;
	}
	
	.hanpukai_plus_one__wrapper .inner {
		display: block;
	}
	
	.hanpukai_plus_one__wrapper .inner div:nth-child(1) {
		width: 100%;
	}
	
	.hanpukai_plus_one__wrapper .title_bold {
		font-size: 2.2rem !important;
		padding: 0;
	}
	.hanpukai_plus_one__wrapper .title_bold p{
        padding-top:0!important;
        padding-bottom:5px!important;
    }
	.hanpukai_plus_one__wrapper .inner .text {

		line-height: 1.4;
	}
	.inner-plusone .title_bold{
		font-size:22px!important;
	}
	.inner-plusone p.text {
		font-size:16px!important;
	}
}
