@charset "utf-8";
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light}@supports not (min-block-size:100dvb){:where(html){block-size:100%}}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){block-size:100%;block-size:100dvb;line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(button){border-style:solid}:where(a){text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem)}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:2px solid var(--focus-color,Highlight);outline-offset:2px}:where(.visually-hidden:not(:focus,:active,:focus-within,.not-visually-hidden)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}
:root{
    --brown:#6d5a52;
    --color2:#7C6804;
    --color2-lighter:#a3975d;
    --color1:#497E4E;
    --color1-lighter:#7aad7f;
    --cream:#F4F4F1;
}
body{
    font-family: "游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    background: #fff;
    color: #333;
    font-size: clamp(13px,2vw,18px);
    font-weight: 300;
    line-height: 2;
}
header{
    text-align: left;
}
.wedding.area .header-back,.header-util,
.area .sp-header-menu-btn,.area .sp-header-menu-search{
	display: none;
}

.area .header-logo{
	float: none;
	width: 144px;
	margin: auto;
}
@media screen and (max-width:736px) {
	
.area .header-logo{
	width: 122px;
}
}

.campaign_container a.btn::after{
    display: none;
}
.campaign_container{
    text-align: center;
}
.campaign_container .wrapper:not(.pt10){
    max-width: initial;
    padding: 0;
}
.campaign_container figure{
    margin: 0;
}
#campaign .bnr_box{
    margin: 0 auto;
    text-align: center;
    width: 1246px;
}
#campaign ul{
    list-style: none;
}
#campaign a{
    text-decoration: none;
}
#campaign .sp{
    display: none!important;
}
#campaign #top{
    background: #fff;
}
#campaign #top h2{
    color:var(--color2);
}
#campaign #top figure{
    height: 50vw;
}
#campaign #top figure img{
    object-fit: cover;
    object-position: bottom;
    width: 100%;
    height: 100%;
}
#campaign h1{
    margin-bottom: 20px;
    font-size: clamp(20px,3vw,34px);
    font-weight: normal;
    font-family: 'Noto Serif JP', "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "游明朝体", "Yu Mincho", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    color: var(--color2);
}
#campaign #top .box{
    background: #fff;
    color: var(--darker);
    width: 100%;
    max-width: 1000px;
    margin: -13% auto 6%;
    padding: 80px 20px 0;
    position: relative;
    z-index: 2;
    border-radius: 50% / 80% 80% 0 0;
}
#campaign #top .box2{
    border: solid 1px #333;
    padding: 20px;
}
#campaign .color2{
    color:var(--color2);
    font-weight: bold;
}
#campaign .color1{
    color: var(--color1);
    font-weight: bold;
}
#campaign #benefits{
    background-color: var(--cream);
}
#campaign #benefits .inner{
    margin: auto;
    padding: 50px 20px;
    max-width: 1000px;
}
#campaign #benefits .inner ul{
    display: flex;
    justify-content: center;
    gap: 25px;
}
#campaign #benefits .inner ul li{
    color: #fff;
    width: 50%;
}
#campaign #benefits .inner ul li h3{
    color: #333;
    background-color: #fff;
    display: grid;
    place-content: center;
    padding: 10px;
    height: 100px;
    line-height: 1.7;
}
#campaign #benefits .inner ul li h3 p{
    margin-top: 33px;
}
#campaign #benefits .inner ul li .box{
    background-color: #fff;
    margin: 20px 20px 0;
    outline-offset: -10px;
    padding: 20px;
}
#campaign #benefits .inner ul .color1_box{
    background-color: var(--color1-lighter);
    color: var(--color1);
    padding: 20px 0;
}
#campaign #benefits .inner ul .color2_box{
    background-color: var(--color2-lighter);
    color:var(--color2);
    padding: 20px 0;
}
#campaign #benefits .inner ul .color1_box .box{
    outline: 1px solid var(--color1);
}
#campaign #benefits .inner ul .color2_box .box{
    outline: 1px solid var(--color2);
}
#campaign #benefits .inner ul li:nth-child(1) figure{
    background-color: var(--color2);
}
#campaign #benefits .inner ul li:nth-child(2) figure{
    background-color: var(--color1);
}
#campaign #benefits .inner ul figure{
    border-radius: 100%;
    width: 60px;
    height: 60px;
    margin: auto;
    display: grid;
    place-content: center;
    transform: translateY(33px);
}
#campaign #benefits .inner ul figure p{
    width: 60%;
    margin: auto;
}
#campaign #benefits .inner ul figure img{
    object-fit: contain;
    width: 100%;
    height: 100%;
}
#campaign #benefits .inner ul li .wh{
    color: #fff;
}
#campaign h2{
    margin-bottom: 10px;
}
#campaign .btn{
    color: var(--color2);
    font-weight: bold;
    border-radius: 50px;
    padding: 10px 20px 5px;
    display: block;
    width: 90%;
    margin: 20px auto 0;
    position: relative;
    background-color: #fff;
    border: none;
}
#campaign .btn .flx{
    display: flex;
    justify-content: center;
    align-items: center;
}
#campaign .btn .flx span{
    display: inline-block;
    width: 15%;
    max-width: 20px;
    margin-right: 5px;
}
#campaign .mark{
    background: linear-gradient(transparent 50%, var(--color2-lighter) 150%);
    display: inline-block;
    width: fit-content;
    text-align: center;
}
#campaign .mark2{
    background: linear-gradient(transparent 50%, var(--color1-lighter) 150%);
    display: inline-block;
    width: fit-content;
    text-align: center;
}
#campaign #benefits .box h3 .mark{
    font-size: clamp(20px,3vw,22px);
    color: var(--color2);
        margin: auto;
}
#campaign #flow h2{
    padding: 50px 20px;
    margin-bottom: 0;
}
#campaign #flow .bg .inner,#campaign #flow .bg2 .inner{
    margin: auto;
    padding: 50px 20px;
    max-width: 1000px;
}
#campaign #flow .bg dt,#campaign #flow .bg2 dt{
    font-weight: bold;
    font-size: larger;
    line-height: 1.5;
    margin-bottom: 10px;
}
#campaign #flow .bg{
    background-color: var(--cream);
    position: relative;
}
#campaign #flow .bg2{
    background-color: #fff;
    position: relative;
}
#campaign #flow .bg:not(.last):after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -35px;
    margin: auto;
    z-index: 2;
    border: 15px solid transparent;
    border-top: 20px solid var(--cream);
}
#campaign #flow .bg2:not(.last):after{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    left: 0;
    bottom: -35px;
    margin: auto;
    z-index: 2;
    border: 15px solid transparent;
    border-top: 20px solid #fff;
}
#campaign #flow .btn{
    background-color: var(--color2);
    color: #fff;
    max-width: 500px;
}
#campaign #flow .box{
    background-color: #fff;
    margin: 0 20px 0;
    outline-offset: -10px;
    padding: 20px;
}
#campaign #flow .box1{
    outline: 2px solid var(--color2);
    color: var(--color2);
}
#campaign #flow .box2{
    outline: 2px solid var(--color1);
    color: var(--color1);
}
#campaign #flow .bold{
    font-weight: bold;
}
#campaign #flow .bold.ttl{
    font-size: larger;
}
#campaign #flow .flx{
    display: flex;
    justify-content: center;
}
#campaign #flow .flx .box{
    margin: 0 10px;
}
#campaign #flow .flx li{
    width: 50%;
}
#campaign #flow .flx li + dd{
    font-size: larger;
}
#campaign #flow .btn .flx{
    align-items: center;
}
#campaign #flow .bg.bottom_row .inner,#campaign #flow .bg2.bottom_row .inner{
    padding-bottom: 1px;
}
#campaign #flow .flx .bg.item,#campaign #flow .flx .bg2.item{
    width: 50%;
    padding:0 20px 50px;
    display: grid;
    place-content: center;
}
#campaign #flow .flx .bg.item:first-of-type,#campaign #flow .flx .bg2.item:first-of-type{
    border-right: 1px solid #555;
}
#campaign #flow .bg.arrow_false:after,#campaign #flow .bg2.arrow_false:after{
    display: none;
}
#campaign #flow .bg.arrow_false .inner,#campaign #flow .bg2.arrow_false .inner{
    padding:0;
}
#campaign #flow .intro{
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 10px;
}
#campaign #flow .intro li{
    border-radius: 100%;
    color: #fff;
    aspect-ratio: 1 / 1;
    width: 17%;
    max-width: 80px;
    line-height: 1.3;
    display: grid;
    place-content: center;
    font-size: smaller;
}
#campaign #flow .intro li.suru{
    background-color: var(--color2-lighter);
}
#campaign #flow .intro li.sareta{
    background-color: var(--color1-lighter);
}
#campaign #flow .step{
    line-height: 1.05;
    font-weight: bold;
    margin-bottom: 5px;
}
#campaign #flow .step strong{
    font-size: clamp(25px, 4vw, 40px);
}
#campaign #compare{
    background-color: var(--cream);
}
#campaign #compare h2{
    padding: 50px 20px;
    margin-bottom: 0;
    background-color: #fff;
}
#campaign #compare .inner{
    max-width: 900px;
    margin: auto;
    padding: 50px 20px;
}
#campaign #compare li{
    border-bottom: solid 1px var(--color2);
    color: (--color2);
    padding: 10px;
}
#campaign #compare table{
    border-color: #a7a7a7;
}
#campaign #compare table td,#campaign #compare table th{
    padding: 10px;
    line-height: 1.4;
}
#campaign #compare table td{
    background-color: #fff;
}
#campaign #compare table th{
    background-color: #58889b;
    color: #fff;
    font-size: smaller;
}
#campaign #compare table th.ttl{
    background-color: #5c5c5c;
}
#campaign #compare table tr td{
    color: #292929;
}
#campaign #compare table tr td:nth-child(3){
    font-weight: bold;
}
#campaign summary{
    text-align: left;
    position: relative;
    list-style: none; 
    font-size: larger;
}
#campaign summary::marker,#campaign summary::-webkit-details-marker {
    display:none;
}
#campaign summary::before {
    content: "＋";
    background-size: contain;
    background-repeat: no-repeat;
    display: block;
    position: absolute;
    width: 25px;
    height: 25px;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .3s ease;
    transform-origin: center;
    display: grid;
    place-content: center;
    color: #fff;
    background-color: var(--color2);
    border-radius: 100%;
    padding: 1px 0 0 2px;
    font-size: smaller;
}
#campaign details[open] summary {
    transition: .3s ease;
}
#campaign details[open] summary::before {
    content: "ー";
    transition: transform .3s ease;
    transform: translateY(-50%) rotate(180deg);
    padding: 2px 0 0 0;
}
#campaign details p{
    text-align: left;
    color: var(--color2);
}
#campaign details p.txt{
    padding: 0 10px;
    color: #333;
}
#campaign #about{
    color: #fff;
    background: 
    linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/pct-facility01.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
#campaign #about .inner{
    margin: auto;
    padding: 100px 20px;
    max-width: 1000px;
}
#campaign #about .btn{
    background-color: var(--color1);
    color: #fff;
    max-width: 500px;
    font-size: clamp(13px, 2vw, 18px);
}
#campaign .bread-block{
    text-align: left;
}
#campaign .pc{
    display: block;
}
@media screen and (max-width:736px) {
    #campaign .sp{
        display: block!important;
    }
    #campaign .pc{
        display: none!important;
    }
    #campaign #top figure {
        height: 60vw;
    }
    #campaign h2{
        margin-bottom: 0;
    }
    #campaign #top .box{
        padding: 60px 2% 0;
        border-radius: 85% / 80% 80% 0 0;
    }
    #campaign #benefits .inner ul,#campaign #flow ul.flx{
        display: block!important;
    }
    #campaign #flow .btn .flx{
        display: flex!important;
    }
    #campaign #benefits .inner ul li,#campaign #flow .flx li{
        width: 100%;
    }
    #campaign #top .box2{
        margin: 0 10px;
    }
    #campaign #compare li{
        padding: 10px 0;
    }
    #campaign summary::before{
        width: 20px;
        height: 20px;
        right: 5px;
        font-size: medium;
        padding: 0;
    }
    #campaign summary::before{
        padding: 0;
    }
    #campaign #benefits .inner,
    #campaign #flow h2,
    #campaign #compare h2 {
        padding: 30px 0!important;
    }
    #campaign #compare .inner{
        padding: 0!important;
    }
    #campaign #about .inner{
        padding: 50px 20px;
    }
    #campaign #flow .flx li:nth-child(2){
        margin-top: 10px;
    }
    #campaign #flow .bg .inner, #campaign #flow .bg2 .inner{
        padding: 50px 10px;
    }
    #campaign #flow .btn{
        width: 100%;
        line-height: 1.4;
    }
    #campaign #flow .flx .bg.item, #campaign #flow .flx .bg2.item{
        padding: 10px 10px 30px;
        font-size: clamp(12px, 2vw, 18px);
    }
    #campaign .bnr_box{
        width: initial;
    }
}
header{
    font-size: 14px;
    line-height: 1.2;
}
.wrapper.pt10{
    font-size: 15px;
    line-height: 1.7;
}
footer{
    font-size: 15px;
    line-height: 1.2;
}
header,footer,.wrapper.pt10{
    color: #222;
    font-family: '游ゴシック' , 'Yu Gothic' , 'YuGothic' , 'Meiryo UI' , 'メイリオ' , 'Meiryo UI' , sans-serif!important;
    font-weight: 500;
    letter-spacing: 0;
}