@charset 'utf-8';
/*
Theme Name: CROSSCOOP
*/
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i,em{font-style:normal}
figure { margin: 0;}
a { color: #000; transition: all .2s ease-out; text-decoration: none;}
a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; font-family: "Zen Kaku Gothic New", sans-serif; font-style: normal; font-size: 2.4rem; line-height: 1.4; word-break: break-all; color: #000;}
#container { width: 100%; overflow: hidden;}
.en, mark { font-family: "Helvetica Neue", "Arial", sans-serif; font-style: normal;}


/*HEADER*/
/*******************************************************************/
#header { position: fixed; top: 0; left: 0; width: 100%; padding: 8px 24px; z-index: 100; white-space: nowrap;}
#header .tel { font-size: 1.9rem; font-weight: 400; line-height: 1.2;}
#header .tel a { font-family: "Helvetica Neue", "Arial", sans-serif; font-size: 3.4rem; font-weight: 700;}
#header .wp-block-button__link { min-width: 204px; font-size: 1.9rem;}
#logo p { margin-bottom: -0.4em; font-size: 1.5rem;}


/*FOOTER*/
/*******************************************************************/
#footer .wp-block-columns { justify-content: center;}
#footer .wp-block-column { flex: auto;}
#footer .logo { text-align: right;}
#footer ul { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; list-style: none; font-size: 1.4rem; font-weight: 500;}
#footer p { margin-top: 40px; font-size: 1.4rem;}


/*CONTENTS*/
/*******************************************************************/
article.wp-block-cover { position: relative; padding: 64px 0;}
article header { position: relative; margin-bottom: 64px; padding: 0 5% 32px; text-align: center; border-bottom: 1px solid #E4E4E4; z-index: 10;}
article header h2 { font-size: 3.9rem;}
section { position: relative; width: 90%; max-width: 1080px; margin: 0 auto; z-index: 10;}
section + section { margin-top: 64px;}
section h3 { margin-bottom: 24px; font-size: 3.2rem;}
section p { line-height: 1.6;}
section * + p { margin-top: 1em; line-height: 1.6;}
section ul { margin-left: 1.5em; list-style: disc;}
section ol { margin-left: 1.5em; list-style: decimal;}
.heading { margin-bottom: 32px; font-size: 3.5rem;}
.heading::after { content: ''; display: block; width: 77px; height: 4px; margin: 16px auto 0; background: #01AACB;}
.center { text-align: center;}
.right { text-align: right;}
.bg { position: relative; padding: 64px 0;}
.bg::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #FAFAFA; z-index: -1;}
.nowrap { white-space: nowrap;}
.sp { display: none;}
.mt24 { margin-top: 24px;}
.indent { padding-left: 1em; text-indent: -1em;}
.fadeInUp { animation-name: fadeInUp;}
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0);} to { opacity: 1; transform: translate3d(0, 0, 0);}}
@keyframes crossfade { 0% { opacity: 0;} 10% { opacity: 1;} 50% { opacity: 1;} 60% { opacity: 0;} 100% { opacity: 0;}}
.animated { opacity: 0; animation-duration: 0.4s; animation-delay: 0.1s; animation-fill-mode: both;}
.wp-block-image :where(figcaption) { font-weight: 500; line-height: 1.2;}
.wp-block-cover, .wp-block-cover-image { min-height: initial!important;}
.scroll { width: 100%; overflow: auto;}
.scroll table { width: auto!important; margin: 0 auto;}
.scroll img { max-width: initial;}

#mv { padding-top: 104px;}
#mv header { margin-bottom: 0; padding-bottom: 16px; border-bottom: none;}
.borderbox { position: relative; display: inline-block; margin-bottom: 8px; padding: 8px 48px; border: 1px solid #FFF; font-size: 3rem;}
.borderbox::after { content: ''; position: absolute; top: 6px; left: 6px; width: 100%; height: 100%; border: 1px solid #FFF;}
#mv h1 { margin-bottom: 8px; font-size: clamp(2.7rem,5.5vw,6rem)!important; line-height: 1.1; text-shadow: 0 0 30px rgba(0,0,0,1), 0 0 2px rgba(0,0,0,.5);}
#mv h1 mark { margin-left: 0.1em; vertical-align: baseline; font-size: clamp(3.2rem,7.6vw,7.5rem)!important;}
#mv .by { font-size: 2.7rem;}
#mv .by img { margin-bottom: 4px; vertical-align: bottom;}
#mv section { max-width: 980px;}
#mv section .box { max-width: 980px; margin-bottom: 8px;}
#mv section .box .wp-block-group__inner-container { padding: 4px 24px;}
#mv section .box .matter { font-size: 2.4rem!important;}
#mv section .box .price { margin-top: 4px; padding-top: 4px; border-top: 1px solid #000; font-size: 2.4rem!important; line-height: 1;}
#mv section .box .price mark { font-size: 4rem;}
#mv section .box .wp-block-column > p { margin-top: 8px;}
#mv section .link { gap: 24px;}
#mv section .link .wp-block-button__link { min-width: 343px; padding: 16px 24px; font-size: 3.3rem;}

#special { padding: 0;}
#special section { position: relative; padding: 8px 50px 48px;}
#special .borderbox { position: absolute; transform: translateY(-50%); background: #019EC6; z-index: 10;}
#special section p { position: relative; padding: 40px 0; background: url("img/dotline.svg") center top no-repeat, url("img/dotline.svg") center bottom no-repeat; font-size: clamp(2.4rem,5.6vw,5.6rem)!important; line-height: 1.2;}
#special section p mark { font-size: clamp(2.8rem,6.7vw,6.7rem)!important;}

#point { padding-bottom: 0;}
#point header { margin-bottom: 0;}
.pointcontents { padding: 64px 0;}
.pointcontents .wp-block-columns { gap: 16px;}
.num { font-size: 9.4rem; font-weight: 900; line-height: 1; color: #FFF; -webkit-text-stroke: 1px #0065AD; text-stroke: 1px #0065AD;}
.pointcontents h3 { margin: 24px 0; font-size: 3.9rem;}
.pointcontents h3 mark { font-size: 4.7rem;}
.pointcontents .fitright { position: relative; flex: none; align-self: stretch; width: calc(50% + 100px); margin: -64px -100px -64px 0;}
.pointcontents .fitright img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.pointcontents .adjustright { margin-right: -100px;}
.pointcontents figcaption sub { font-size: 1.4rem;}
.pointcontents .wp-block-flexible-table-block-table figcaption { font-size: 1.4rem;}

article.cta { padding: 0;}
article.cta section { padding: 64px 50px;}
.cta .wp-block-button { flex: 1;}
.cta .wp-block-button__link { display: block; font-size: clamp(1.6rem,1.8vw,2.4rem);}

#membership { padding-bottom: 0;}
#membership .borderbox, #membership .borderbox::after { border-color: #01AACB;}
.membership .membership-border { padding: 24px; border: 2px solid #01AACB;}
.casetable table tr:nth-of-type(3), .casetable table tr:nth-of-type(4) { border-bottom: 1px solid #CCC; white-space: nowrap;}
.casetable table th { background: none!important; border: none!important; font-size: clamp(1rem,1.4vw,1.4rem); line-height: 1.2;}
.casetable table th mark { font-size: clamp(1.2rem,1.8vw,2.4rem);}
.casetable table td { border: none!important; font-size: clamp(1rem,1.4vw,2.4rem); line-height: 1.2;}
.casetable table td img { max-width: 240px!important;}

#example h3 { margin: 16px 0; font-size: 2.4rem;}
#example h3::after { content: ''; display: block; width: 64px; height: 1px; margin: 16px auto 0; background: #01AACB;}

#facility { padding-bottom: 0;}
.tab { display: flex; justify-content: center; align-items: flex-end; min-height: 84px; margin: 24px 0 0; list-style: none; border-bottom: 1px solid #CCC;}
.tab li { padding: 8px 12px; text-align: center; background: #E4E4E4; border: 1px solid #E4E4E4; font-size: 1.4rem; font-weight: 500; line-height: 1.2; color: #CCC; cursor: pointer; transition: .2s ease-out;}
.tab li.on { padding-top: 16px; background-color : #CCEEF5; border-color: #01AACB; color: #111;}
.tab li strong { display: block; font-size: 3.2rem; font-weight: 500;}
.tabcontent img { width: 100%;}
.hide { display: none;}
.map { margin: 24px 0;}
.service { display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 40px; margin: 0; list-style: none;}
.service li { padding: 8px; text-align: center; background: #FFF; border: 1px solid #E4E4E4; font-weight: 500;}

.more a { position: relative; display: inline-block; padding-right: 24px; font-size: 1.7rem; font-weight: 500;}
.more a::before, .more a::after { content: ''; position: absolute; top: 50%; right: 0; width: 12px; height: 1px; background: #01AACB;}
.more a::before { transform-origin: right bottom; transform: rotate(30deg);}
.more a::after { transform-origin: right top; transform: rotate(-30deg);}

.comparisontable table { border: none;}
.comparisontable tr { border-bottom: 1px solid #E4E4E4;}
.comparisontable tr:first-of-type { border-bottom: 1px solid #CCC;}
.comparisontable th { border: none!important;}
.comparisontable thead th { font-weight: 500;}
.comparisontable tbody th { font-size: 1.7rem; font-weight: 500;}
.comparisontable td { border: none!important; font-size: 1.4rem;}
.comparisontable td strong { font-size: 2.4rem;}
.comparisontable td mark { font-weight: 500;}

#flow .pointcontents { padding: 0;}
#flow .flow { height: 100%;}
#flow .flow .wp-block-group__inner-container { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; gap: 0 24px; height: 100%;}
#flow .num { grid-row: 1 / 3; display: flex; flex-direction: column; align-items: center;}
#flow .num:not(.end)::after { content: ''; display: inline-block; width: 1px; height: 100%; background: #111111;}
#flow .pointcontents .fitright { width: calc(50% + 100px); margin: 0 -100px 64px 0;}
#flow .pointcontents .fitright img { position: relative;}

#faq h3 { margin-bottom: 16px;}
#faq h3::after { content: ''; display: block; width: 64px; height: 1px; margin-top: 16px; background: #111;}
#faq * + h3 { margin-top: 32px;}


/*PAGE*/
/*******************************************************************/
#page { padding: 64px 0;}
#pageheader { max-width: 240px; margin: 0 auto 64px; text-align: center;}
#pagefooter { margin-top: 64px; text-align: center;}





@media only screen and (max-width: 1024px){
body { font-size: 1.6rem;}


/*HEADER*/
/*******************************************************************/
#header { padding: 8px 16px;}
#header .tel { text-align: left; font-size: 1rem;}
#header .tel a { font-size: 2rem; color: #0065AD;}
#header .wp-block-buttons { display: none;}
#logo p { margin-bottom: -0.2em; font-size: 1rem;}


/*FOOTER*/
/*******************************************************************/
#footer .logo { text-align: center;}
#footer ul { justify-content: center;}
#footer p { padding-bottom: 80px;}


/*CONTENTS*/
/*******************************************************************/
article.wp-block-cover { padding: 48px 0;}
article header { margin-bottom: 48px;}
article header h2, .has-large-font-size { font-size: 2.4rem!important;}
section + section { margin-top: 48px;}
section h3 { font-size: 1.8rem;}
.heading { font-size: 2rem;}
.bg { position: relative; padding: 48px 0;}
.note { font-size: 1rem;}
.pc { display: none;}
.sp { display: block;}

#mv { padding-top: 80px;}
#mv header { padding-bottom: 16px;}
.borderbox { margin-bottom: 8px; padding: 4px 24px; font-size: 1.6rem;}
.borderbox::after { top: 3px; left: 3px;}
#mv h1 { margin-bottom: 8px;}
#mv .by { font-size: 2rem;}
#mv .by img { width: 60px!important;}
#mv section .box { gap: 8px;}
#mv section .box .wp-block-group__inner-container { padding: 8px;}
#mv section .box .wp-block-column { position: relative; margin-bottom: 32px;}
#mv section .box .wp-block-column > p { position: absolute; top: 100%; right: 0; white-space: nowrap; transform-origin: right top; transform: scale(0.6);}
#mv section .box .matter { font-size: 1.3rem!important; line-height: 1;}
#mv section .box .price { margin-top: 4px; padding-top: 4px; font-size: 2rem!important;}
#mv section .box .price mark { font-size: 2.8rem;}
#mv section .link { gap: 16px;}
#mv section .link .wp-block-buttons { width: 88%;}
#mv section .link .wp-block-button__link { min-width: initial; padding: 8px 16px; font-size: 2.4rem;}

#special section { width: auto; padding: 8px 5% 16px;}
#special section p { padding: 24px 0; background-size: 100% auto;}

.pointcontents { padding: 48px 0 0;}
.num { font-size: 5.6rem;}
.pointcontents h3 { margin: 8px 0; font-size: 2.4rem; line-height: 1.2;}
.pointcontents h3 mark { font-size: 4rem;}
.pointcontents .fitright { margin: 0;}
.pointcontents .fitright figure { margin-left: -5%; margin-right: -5%;}
.pointcontents .fitright img { position: relative;}
.pointcontents .adjustright { margin-right: 0;}

article.cta { padding: 0;}
article.cta section { padding: 24px 5%;}
.cta .wp-block-buttons { flex-direction: column;}
.cta .wp-block-button { width: 100%;}
.cta .wp-block-button__link { padding: 8px;}

.membership .membership-border { padding: 16px;}
.casetable table th { padding: 0.5em 0!important;}
.casetable table td { padding: 0.5em 0.1em!important;}
.casetable table td img { width: 100%!important;}

#example h3 { font-size: 2rem;}
.ex-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 16px;}
.ex-scroll .wp-block-column { min-width: 240px;}

.gallery p { font-size: 1.8rem!important;}
.tab { min-height: 84px;}
.tab li { padding: 8px; font-size: 1rem;}
.tab li strong { font-size: 2.4rem;}
.map iframe { height: 400px;}
.service { grid-template-columns: repeat(2,1fr); gap: 8px; font-size: 1.2rem;}
.service li { padding: 4px;}

#case .pointcontents { flex-direction: column-reverse;}
#case .pointcontents h3 { font-size: 2rem;}
#case .pointcontents p:not(.num) { font-size: 1.4rem;}
#case .has-fixed-layout { table-layout: auto; font-size: 1.2rem;}
.case-scroll { width: 100%; overflow-x: auto; overflow-y: hidden; padding-bottom: 16px;}
.case-scroll > .wp-block-group__inner-container { display: flex; align-items: flex-start; gap: 24px;}
.case-scroll > .wp-block-group__inner-container > .wp-block-columns { min-width: 260px;}
.case-scroll > .wp-block-group__inner-container > .wp-block-columns > .wp-block-column { flex: none!important; align-self: flex-end;}
.case-scroll .wp-block-image figure { display: block; width: 100%;}
.case-scroll .wp-block-image a { position: relative; display: block; width: 100%;  padding-top: calc(300 / 400 * 100%); border-radius: 10px; overflow: hidden;}
.case-scroll .wp-block-image a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top;}
.case-scroll .bg::before { display: none;}

#cost .scroll img { min-width: 600px;}

.comparisontable { min-width: 500px;}
.comparisontable thead th { font-size: 1.2rem!important; white-space: nowrap;}
.comparisontable tbody th { font-size: 1.2rem;}
.comparisontable td { font-size: 1.2rem;}
.comparisontable td strong { font-size: 1.6rem;}

#flow .pointcontents { position: relative; padding: 0;}
#flow .pointcontents:not(:last-of-type)::after { content: ''; position: absolute; top: 48px; left: 32px; bottom: 40px; display: inline-block; width: 1px; height: calc(100% - 48px); background: #111111;}
#flow .flow { height: 100%;}
#flow .flow .wp-block-group__inner-container { gap: 0 16px;}
#flow .num { font-size: 4.8rem;}
#flow .num:not(.end)::after { display: none;}
#flow .pointcontents .fitright { flex: 1!important; width: auto; margin: 0 -5% 40px 80px;}
#flow .pointcontents .fitright figure { margin: 0;}

#faq h3 { margin-bottom: 16px; padding-right: 24px; background: url("img/plus.svg") right 6px no-repeat; background-size: 16px auto; cursor: pointer;}
#faq h3 + * { display: none; opacity: 0; transition: .2s ease-out;}
#faq h3.on { background-image: url("img/minus.svg");}
#faq h3.on + * { display: block; opacity: 1;}
}





@media print {
#container { width: 1024px;}
.animated { opacity: 1;}
}