@charset "utf-8";
/*
Theme Name: toikota
Theme URI: https://toikota.com/
Author: toikota design studio
Author URI: https://toikota.com/
Version: 0.0.1
*/
/* リセットCSS */
*,:after,:before{box-sizing:border-box;border-style:solid;border-width: 0;}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0);overflow-y: scroll;}body{margin:0}main{display:block;}h1,h2,h3,h4,h5,h6{font-size:inherit;line-height:inherit;font-weight: 700;margin: 0;}address,blockquote,dl,figure,form,iframe,ol,p,pre,table,ul{margin:0;}ol,ul{padding:0;list-style:none}dd{margin-left:0}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit}pre{font-family:monospace;font-size:inherit}address{font-style:inherit}a{background-color:transparent;text-decoration:none;color:inherit;transition: var(--hover-transform);}em{font-style:normal}abbr[title]{text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight: 400;}code,kbd,samp{font-family:monospace;font-size:inherit}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}embed,iframe,img,object{vertical-align:bottom;}[type=checkbox]{-webkit-appearance:checkbox;appearance:checkbox;}[type=radio]{-webkit-appearance:radio;appearance:radio}button,input{overflow:visible}button,select{text-transform:none;}[type=button],[type=reset],[type=submit],button{cursor:pointer;-webkit-appearance:none;appearance:none}[type="button"][disabled],[type="reset"][disabled],[type="submit"][disabled],button[disabled]{cursor:default}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}select::-ms-expand{display:none}fieldset,option{padding:0}fieldset{margin:0;min-width:0}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}label[for]{cursor:pointer}details{display:block}summary{display: block;outline: none;cursor: pointer;}summary::-webkit-details-marker {display: none;}table{border-collapse:collapse;border-spacing:0}caption{text-align:left}[hidden],template{display:none}img{max-width: 100%;}
/* IEブラウザの注意喚起 */
.iebox{display:none;}@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {.iebox{display:block;padding: 20px;position: fixed;bottom:0;width: 100%;z-index: 9999;text-align: center;background: red;color:#fff;font-weight: 800;}}

/* 汎用CSS
===================================================== */
/* スマホでテキストの折り返し用 */
.ib {display: inline-block}

/* フォーム */
label {margin-bottom:8px;}
select,
input[type=date],
input[type=email],
input[type=number],
input[type=password],
input[type=tel],
input[type=text],
input[type=url],
textarea {width: 100%;max-width: 100%;padding: 8px 16px;background-color: #F4F4F4;margin: 4px 0 0;}
select,input,textarea {line-height: 1.1;font-family: inherit;font-size: inherit;font-weight: inherit;}

input[type="submit"],
input[type="button"]{padding: 12px 16px;}

.fontM{font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro",HGS明朝E,メイリオ,Meiryo,serif;}
.fontG{font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;}
.fonten{font-family:var(--en-font)}

:root {
  --font-color: #252F3B;
  --main-color:#886D5D;
  --main-font:"Noto Serif JP", sans-serif;
  --en-font: "Marcellus", sans-serif;
  --hover-transform:all .3s ease-in-out;
  --hamburger-transform:display .5s ease-in-out;
}

::selection {background-color: #252F3B61;color:#fff;}

/* 基本レイアウト
===================================================== */

html{height: -webkit-fill-available;}
body{min-height: 100vh;min-height: -webkit-fill-available;}

body {font-size: 16px;font-family:var(--main-font);line-height:1.6;letter-spacing: .05em;color: var(--font-color);text-align: justify;font-feature-settings: "palt";background: url(images/page-bg.jpg)repeat center / cover;}
body.fix {position: fixed;overflow: hidden;width: 100vw;height: 100vh;}

#page{overflow:hidden;}

.container{width: 1366px;max-width: calc(100% - 48px);margin-inline: auto;padding-inline: 24px;position: relative;}


/*-------------------------------------
/* 共通
--------------------------------------- */
.accent-txt{color:var(--main-color)}
.en-tit{font-family:var(--en-font);letter-spacing: .3em;}

/* ヘッダー
===================================================== */
.header-content{position:fixed;display:flex;justify-content:space-between;align-items:center;width:100%;padding:20px;z-index: 112;opacity: 0;transition: opacity 1s ease-in-out;}
.header-logo img{width: 44px;}
/* ハンバーガーメニュー */
.hamburgerbutton {position:relative;text-decoration: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;border: none;cursor: pointer;height: 40px;width: 80px;background-color: transparent;padding: 0;margin:0 auto;top: 0;right: 0;z-index: 111;}
.hamburgerbutton-line {position: absolute;inset:0;margin: auto;width: 56px;height: 1px;-webkit-transition: inherit;transition: inherit;background-color:transparent;}
.hamburgerbutton-line::before,
.hamburgerbutton-line::after {position: absolute;display: block;width: 100%;height: 100%;background-color:#fff;content: '';-webkit-transition: inherit;transition: inherit;transition: transform .2s;}
.hamburgerbutton-line::before {top: -2px;}
.hamburgerbutton-line::after {top: 2px;}
.hamburgerbutton[aria-expanded="true"] .hamburgerbutton-line {background-color: transparent;}
.hamburgerbutton[aria-expanded="true"] .hamburgerbutton-line::before,
.hamburgerbutton[aria-expanded="true"] .hamburgerbutton-line::after {top: 0;background-color: #000;}
.hamburgerbutton[aria-expanded="true"] .hamburgerbutton-line::before {transform: rotate(10deg);width:100%;background-color: #fff;}
.hamburgerbutton[aria-expanded="true"] .hamburgerbutton-line::after {transform: rotate(-10deg);width:100%;background-color: #fff;}
.visuallyHidden {position: absolute;white-space: nowrap;width: 1px;height: 1px;overflow: hidden;border: 0;padding: 0;clip: rect(0 0 0 0);clip-path: inset(50%); margin: -1px;}
.nav_hamburger_menu{position:fixed;inset:0;background-color: var(--main-color);color: #fff;width:100%;height: 100dvh;overflow-y: scroll;transition: opacity .5s;z-index: 111;display:flex;align-items: center;justify-content: center;display:none;}

.hamburger-content{width: 100%;height: 100%;margin:0 auto;padding: 80px 32px;display: flex;justify-content:space-between;align-items:center;flex-direction: row-reverse}
.hamburger-nav-wrap{display:flex;justify-content: space-between;gap: 40px;width: 100%;}
.hamburger_Menu li:not(:first-child){margin:48px 0 0;}
.hamburger_Menu li a{font-family:var(--en-font);letter-spacing:.3em}
.is-drawerActive .hamburgerbutton{z-index: 1112;background-color:transparent}
.is-drawerActive .nav_hamburger_menu{display: flex;}

/* フッター
---------------------------- */
.sec-footer{padding:64px 24px;text-align:center;}
.footer-content{display:flex;flex-direction:column;align-items:center;}
.footer-logo .site-name{margin-top:.5em}
.site-generator{font-size:14px;margin-top: 3em;}
.site-created{font-size:12px;opacity:.5}
/* TOP
===================================================== */

.loding{position:fixed;inset:0;margin:auto;width:100%;height:100svh;background-color:var(--main-color);z-index:1113;display:grid;place-items: center;animation: fadeout 5s  ease-out forwards;}
@keyframes fadeout {
  30% {
    opacity:1;
  }
  100% {
    opacity:0;
    visibility:hidden
  }
}
.loaded .header-content{opacity:1}
.loaded .mv-logo{opacity:1}
.loaded .mv-catch p{opacity:1;translate:0;}

.fadeUP{opacity:0;translate:4px 0;transition: all 1s ease-in-out;}
.js-inview.-active .fadeUP{opacity:1;translate:0;}

.mv{position:relative;height:100svh}
.mv-logo{position:absolute;top:calc(50% - 51px);right: 32px;z-index: 11;opacity:0;transition: opacity 1s ease-in-out;}
.mv-catch{position:absolute;bottom:20px;right:20px;z-index: 11;color:#fff;}
.mv-catch p{opacity:0;translate:0 4px;transition: all 1s ease-in-out;}
.mv-catch p:last-child{transition-delay:.2s}
.mv-img-wrap figure{height:100svh}
.mv-img-wrap img{width:100%;height:100%;object-fit:cover}

.side-scroll-item-wrapper{position: relative;width:100%;height: 100svh;padding:40px 100px;display: grid;place-items: center;background: url(images/page-bg.jpg)repeat center / cover;}
.side-scroll-item-content{display:flex;}
.about-item{width: 980px;position: relative;}
.accent-img{position:relative;}
.accent-img::before{content:'';position:absolute;width:108px;aspect-ratio:15/8;background-color:var(--main-color);z-index:-1}

.about-item-1{padding-left:min(64px,5vw)}
.about-item-1-head{padding-block:64px;width: 180px;position:relative}
.about-item-1-head h2{text-align:right}
.about-item-1-head .about-en-1{position:absolute;top:0;}
.about-des-1{display:flex;align-items:center;margin-top: 48px;}
.about-img-1{width:393px;margin-inline:auto 8vw;}
.about-img-1.accent-img::before{top:-24px;right:-24px;}
.about-des-1 p{width:50%;display:grid;justify-items: end;}
.about-des-1 .about-en-2{font-size: 14px;padding-right: 7em;letter-spacing: .1em;}

.about-item-2{padding-left:min(160px,12vw)}
.about-img-2{width:278px;}
.about-des-2{width:fit-content;padding-left: 200px;margin-top:56px;}
.about-img-3{width:281px;margin-left:auto;margin-top:1em}
.about-img-3.accent-img::before{bottom:-24px;left:-24px;}
.about-img-4{position:absolute;width: 178px;top: calc(50% - 105px);right: -100px;}

.about-item-3{padding-right:min(64px,5vw)}
.about-img-5{width:281px;margin-left:240px}
.about-img-5.accent-img::before{bottom:-24px;right:-24px;}
.about-des-3{width:fit-content;margin-inline: auto;margin-top:8em;padding-left: 240px;}

.min-height .sec-plan{padding-top:128px;}
.sec-plan{text-align:center;}
.sec-plan .container{padding-block:128px;border-top:4px double;padding-inline: 0;}
.plan-item{display:flex;align-items:center;justify-content:center;gap:32px;margin-top:152px;}
.plan-item p{width:112px;aspect-ratio:1/1;display:grid;place-items: center;border:1px solid;border-radius:100%;position:relative;}
.plan-item p:not(:last-child)::after{content:'+';position:absolute;right:-22px;}
.plan-des{margin-top:96px;}
.plan-des-body{margin-top:96px;}
.plan-des-note{font-size:12px;margin-top:.5em}
.plan-img-1{position:absolute;top:128px;right:-40px;width:278px;}
.plan-img-1.accent-img::before{bottom:-24px;left: -64px;}
.plan-img-2{position:absolute;top:40%;left:0px;width:278px;}
.plan-img-3{position:absolute;bottom:128px;right:calc(50% + 320px);width:178px;}

.sec-map .container{padding-block:128px;border-top:4px double;}
.sec-map .map-tit{text-align:center;}
.map-item{width: 960px;max-width: 100%;display:flex;gap:48px;align-items:flex-end;margin-top:96px;margin-inline: auto;}
.googlemap{width:calc(60% - 24px);}
.googlemap iframe{width:100%;height:100%;aspect-ratio:4/3;filter: grayscale(1);}
.store-info{width:calc(40% - 24px)}
.store-info-in{padding-block:1em;border-top:1px solid}
.store-info-in:last-child{border-bottom:1px solid;}
.store-info-in h3{margin-bottom:1em}

.sec-qanda .container{padding-block:128px;border-top:4px double;border-bottom:4px double;}
.sec-qanda .qanda-tit{text-align:center;}
.faq-item{width: 560px;max-width: 100%;margin-top:96px;margin-inline: auto;}
.faq-summary-in{display:flex;align-items:center;gap: 2em;f;}
.faq-txt{position: relative;padding-block: 1em;display: flex;gap: 1em;align-items: center;}
.faq-txt::before{content:'Q';font-family: var(--en-font);}
.faq-des{overflow: auto;}
.faq-des-in{padding-left: calc(40px + 2em);display: flex;gap: 1em;}
.faq-des-in::before{content:'A';font-family: var(--en-font);}
.faq-icon{width: 40px;aspect-ratio: 1/1;border: 1px solid;border-radius: 100%;position:relative;transition: background-color 0.4s;}
.faq-icon::before{content:'';position:absolute;width: 7px;height: 1px;background-color: var(--font-color);inset:0;margin:auto;}
.faq-icon::after{content:'';position:absolute;width: 1px;height: 7px;background-color: var(--font-color);inset:0;margin:auto;transition: transform 0.4s;}
details[open] .faq-icon::after{transform:rotate(90deg);z-index:-1}
.faq-item details:not(:first-child){margin-top:1em}

@media(max-width:1023px){
  .plan-img-1{position:static;width:48%;min-width:186px;margin: 105px 0 0 auto;}
  .plan-img-2{position:static;width:46%;min-width:176px;margin: 56px 0 0 0;}
  .plan-img-3{position:static;width:33%;min-width:125px;margin: 24px 7vw 0 auto;}
  .plan-img-1.accent-img::before{display:none;}
  .map-item{flex-direction:column;align-items:center;}
  .googlemap,
  .store-info{width:640px;max-width:100%;}
}


@media(max-width:680px){
  .mv-item{height:50svh;background-color:var(--main-color);}
  .mv-logo{top:80px;}
  .mv-catch{bottom:calc(50% + 24px);right:auto;left:24px;}
  .mv-img-wrap figure{height:50svh}
  .side-scroll-item-wrapper{padding-inline:24px;}
  .about-item{width:640px}
  .about-item-1,
  .about-item-2{padding-left:40px;}
  .about-item-3{padding-right:40px;}
  .plan-item p{font-size:14px;}
  .faq-summary-in{gap:1em}
  .faq-des-in{padding-left:calc(40px + 1em)}
  .sec-plan .container{padding-block:80px}
  .plan-item{margin-top:56px}
  .plan-des,
  .plan-des-body{margin-top:72px}
  .sec-map .container{padding-block:80px}
  .map-item{margin-top:56px;}
  .sec-qanda .container{padding-block:80px;}
  .faq-item{margin-top:56px;}
}