@font-face{font-family:"Moriya Navigation Mincho";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/site-mincho-26f781dc77f7.woff") format("woff");} article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { background: #fff; color: #000; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-size: 1em; } pre { white-space: pre-wrap; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } @media screen and (max-width: 767px) { article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } audio, canvas, video { display: inline-block; } audio:not([controls]) { display: none; height: 0; } [hidden] { display: none; } html { background: #fff; color: #000; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { margin: 0; } a:focus { outline: thin dotted; } a:active, a:hover { outline: 0; } h1 { font-size: 2em; margin: 0.67em 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } mark { background: #ff0; color: #000; } code, kbd, pre, samp { font-size: 1em; } pre { white-space: pre-wrap; } q { quotes: "\201C" "\201D" "\2018" "\2019"; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } button, input, select, textarea { font-size: 100%; margin: 0; } button, input { line-height: normal; } button, select { text-transform: none; } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], html input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table { border-collapse: collapse; border-spacing: 0; } } body,div, dl,dt,dd,ul,ol,li, h1,h2,h3,h4,h5,h6, pre,form,fieldset,input,textarea,p,blockquote, th,td { margin:0; padding:0; font-size:100%;} html { overflow-y:scroll;} table { border-collapse:collapse; border-spacing:0;} fieldset,img { border:0;} address,caption,cite,code,dfn,em,strong,th,var,figcaption { font-style:normal; font-weight:normal;} ol,ul { list-style:none;} caption,th { text-align:left;} h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd,th,td { font-weight:normal; color:#000000;} q:before,q:after { content:'';} abbr,acronym { border:0;} hr {display: none;} img {vertical-align:bottom;border:none;} caption {display:none;} legend {display:none;} label {cursor:pointer;} .none { display:none; } .cL { clear:left; } .cR { clear:right; } .cB { clear:both; } .fL { float:left; } .fR { float:right; } .aL { text-align: left !important; } .aC { text-align: center !important; } .aR { text-align: right !important; } .fB { font-weight:bold; } .fS { font-size: 87%; } .lastList { background: none !important; border: none !important; margin-right: 0 !important; padding-right:0; } .lastList02 { border: none !important; margin-right: 0 !important; padding-right:0; } .textBorderLine { text-decoration:underline; } .tA { color:#cc3333; font-weight:bold; } a.imgBtn:hover img { opacity:0.70; filter:alpha(opacity=70); } .mT00 { margin-top: 0 !important;} .mT05 { margin-top: 5px !important;} .mT10 { margin-top:10px !important;} .mT15 { margin-top:15px !important;} .mT20 { margin-top:20px !important;} .mT25 { margin-top:25px !important;} .mT30 { margin-top:30px !important;} .mT35 { margin-top:35px !important;} .mT40 { margin-top:40px !important;} .mT45 { margin-top:45px !important;} .mT50 { margin-top:50px !important;} .mR00 { margin-right: 0 !important;} .mR05 { margin-right: 5px !important;} .mR10 { margin-right:10px !important;} .mR15 { margin-right:15px !important;} .mR20 { margin-right:20px !important;} .mR25 { margin-right:25px !important;} .mR30 { margin-right:30px !important;} .mR35 { margin-right:35px !important;} .mR40 { margin-right:40px !important;} .mR45 { margin-right:45px !important;} .mR50 { margin-right:50px !important;} .mB00 { margin-bottom: 0 !important;} .mB05 { margin-bottom: 5px !important;} .mB10 { margin-bottom:10px !important;} .mB15 { margin-bottom:15px !important;} .mB20 { margin-bottom:20px !important;} .mB25 { margin-bottom:25px !important;} .mB30 { margin-bottom:30px !important;} .mB35 { margin-bottom:35px !important;} .mB40 { margin-bottom:40px !important;} .mB45 { margin-bottom:45px !important;} .mB50 { margin-bottom:50px !important;} .mB60 { margin-bottom:60px !important;} .mL00 { margin-left: 0 !important;} .mL05 { margin-left: 5px !important;} .mL10 { margin-left:10px !important;} .mL15 { margin-left:15px !important;} .mL20 { margin-left:20px !important;} .mL25 { margin-left:25px !important;} .mL30 { margin-left:30px !important;} .mL35 { margin-left:35px !important;} .mL40 { margin-left:40px !important;} .mL45 { margin-left:45px !important;} .mL50 { margin-left:50px !important;} .pT00 { padding-top: 0 !important;} .pT05 { padding-top: 5px !important;} .pT10 { padding-top:10px !important;} .pT15 { padding-top:15px !important;} .pT20 { padding-top:20px !important;} .pT25 { padding-top:25px !important;} .pT30 { padding-top:30px !important;} .pT35 { padding-top:35px !important;} .pT40 { padding-top:40px !important;} .pT45 { padding-top:45px !important;} .pT50 { padding-top:50px !important;} .pR00 { padding-right: 0 !important;} .pR05 { padding-right: 5px !important;} .pR10 { padding-right:10px !important;} .pR15 { padding-right:15px !important;} .pR20 { padding-right:20px !important;} .pR25 { padding-right:25px !important;} .pR30 { padding-right:30px !important;} .pR35 { padding-right:35px !important;} .pR40 { padding-right:40px !important;} .pR45 { padding-right:45px !important;} .pR50 { padding-right:50px !important;} .pB00 { padding-bottom: 0 !important;} .pB05 { padding-bottom: 5px !important;} .pB10 { padding-bottom:10px !important;} .pB15 { padding-bottom:15px !important;} .pB20 { padding-bottom:20px !important;} .pB25 { padding-bottom:25px !important;} .pB30 { padding-bottom:30px !important;} .pB35 { padding-bottom:35px !important;} .pB40 { padding-bottom:40px !important;} .pB45 { padding-bottom:45px !important;} .pB50 { padding-bottom:50px !important;} .pL00 { padding-left: 0 !important;} .pL05 { padding-left: 5px !important;} .pL10 { padding-left:10px !important;} .pL15 { padding-left:15px !important;} .pL20 { padding-left:20px !important;} .pL25 { padding-left:25px !important;} .pL30 { padding-left:30px !important;} .pL35 { padding-left:35px !important;} .pL40 { padding-left:40px !important;} .pL45 { padding-left:45px !important;} .pL50 { padding-left:50px !important;} div {zoom:1;} .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-table;} * html .clearfix {height: 1%;} .clearfix {display: block;} * html .clearfix { zoom: 1;} *:first-child+html .clearfix { zoom: 1;} p,li,dt,dd,th,td,figcaption { font-size:14px; color:#323333; line-height:1.8; } h1,h2,h3,h4,h5,form { clear:both; color:#030000; } a:link, a:visited, a:active { color:#666666; text-decoration:none; } a:hover { color:#666666; text-decoration:underline; } a:active, a:focus { outline:none; } @media screen and (max-width: 767px) { html { overflow-y: auto; } } html { background:url(/media/b77c491f1a82a5e1-1800.webp) repeat-y center top #f7f7f7; } body { width: 100%; min-width: 960px;; } header#headerArea { position:absolute; top:0; height:376px; z-index:2; width:100%; min-width: 960px; background:url(/media/ff4558f4c0c7fdd6-1800.webp) no-repeat center top; } header#headerArea div.inner { position:relative; margin:0 auto; width:960px; } header#headerArea div.inner #siteLogo { padding-top:50px; text-align:center; } header#headerArea .add { position:absolute; top:88px; left:0px; } .siteLogo2 { display: none; } header#headerArea nav a { display:block; width:50px; text-indent:-9999px; } #gNavR { position:absolute; top:80px; right:-8px; width:251px; } #gNavR li, #gNavL li { float:right; } #gNavR li a { height:164px; background:url(/media/1df50c2b17837f2c-1800.webp) no-repeat left top; } #gNavR li.ac a, #gNavR li a:hover { background:url(/media/9810baa8ee3dac6c-1800.webp) no-repeat left top; } #gNavR li.l01 a { background-position:-201px top; } #gNavR li.l02 a { background-position:-151px top; } #gNavR li.l03 a { background-position:-101px top; } #gNavR li.l04 a { background-position:-51px top; } #gNavR li.l05 a { background-position:left top; width:51px!important; } #gNavL { position:absolute; top:80px; left:83px; width:151px; } #gNavL li a { height:164px; background:url(/media/25e095f393deb955-1800.webp) no-repeat left top; } #gNavL li.ac a, #gNavL li a:hover { background:url(/media/65a788be16bd23b0-1800.webp) no-repeat left top; } #gNavL li.l01 a { background-position:-101px top; } #gNavL li.l02 a { background-position:-51px top; } #gNavL li.l03 a { background-position:leftpx top; width:51px!important; } #g-nav { display: none; } div#topSlide { top:300px; height:610px; z-index:1; } div#topSlide { margin:300px auto 115px auto; text-align:center; width:100%; background-position:center top!important; } .bgstretcher, .bgstretcher UL, .bgstretcher UL LI { position: absolute; top: 0; left: 0; } .bgstretcher UL, .bgstretcher UL LI { margin: 0; padding: 0; list-style: none; } .bgstretcher { overflow: hidden; position: absolute; left:0!important; z-index: 1; _position: absolute; top: 0; left: 0; } .insta2 { display: none; } .top-logo { display: none; } footer#footerArea { clear:both; width:100%; background:url(/media/5ed22a28da775796-1800.webp); } #footerArea div.inner { margin:0 auto; padding:40px 0 70px 0; width:960px; } #footerArea div.inner:after { content: ""; clear: both; display: block; } #footerArea div.logoArea { float:left; margin-right:20px; width:300px; } .logo { margin-bottom:15px; } #footerArea div.logoArea dd { color:#e3e2e2; } .logo2 { display: none; } #footerArea div.linkArea { float:left; width:500px; } #footerArea div.linkArea ul { float:left; margin-right:25px; } #footerArea div.linkArea ul li a { display:block; padding-left:12px; color:#e3e2e2; background:url(/media/e9003950b5479e36-1800.webp) no-repeat left 50%; } #footerArea div.linkArea ul li a:hover { color:#ccc; text-decoration:none; } ul#pageTop { position: fixed; right: 0px; bottom: 220px; z-index: 9000; display: none; } ul#pageTop a { display: block; } @media screen and (max-width: 767px) { body { width: 100%; min-width: 0;; } header#headerArea { height:50px; background:url(/media/c6f133c150b74847-1800.webp) no-repeat center top; position: fixed; min-width: 0; z-index: 9999; } header#headerArea div.inner { position:relative; display: flex; margin:0 auto; width:100%; } header#headerArea div.inner #siteLogo { display: none; } .siteLogo2 { display: inline-block; width: 0%; top: 0; left: 0; padding-top: 10px; margin-left: 10px; } .siteLogo2 a { width: 33%; height: 80%; display: block; position: absolute; } .siteLogo2 a img { max-width: 30vw; top: 0; left: 0; } header#headerArea .add { display: none; } .section-title { font-size: 16px; margin-top: 4px; margin-left: 10px; } .container { width: 85%; margin: auto; } header#headerArea nav a { display:none; } #gNavR { display: none; } #gNavR li,#gNavL li { float:none; } #gNavR li a { display: none; } #gNavR li.ac a, #gNavR li a:hover { display: none; } #gNavR li.l01 a { display: none; } #gNavR li.l02 a { display: none; } #gNavR li.l03 a { display: none; } #gNavR li.l04 a { display: none; } #gNavR li.l05 a { display: none; } #gNavL { display: none; } #gNavL li a { display: none; } #gNavL li.ac a, #gNavL li a:hover { display: none; } #gNavL li.l01 a { display: none; } #gNavL li.l02 a { display: none; } #gNavL li.l03 a { display: none; } #g-nav { display: none; } div#topSlide { margin:0px auto 0px auto; text-align:center; width:100%; background-position:center top!important; } .bgstretcher, .bgstretcher UL, .bgstretcher UL LI { position: absolute; top: 0; left: 0; } .bgstretcher UL, .bgstretcher UL LI { margin: 0; padding: 0; list-style: none; } .bgstretcher { overflow: hidden; position: absolute; left:0!important; z-index: 1; _position: absolute; top: 0; left: 0; } .top-logo { display: block; text-align: center; margin-top: -450px; margin-bottom: 40vh; position: relative; z-index: 999; filter: drop-shadow(2px 2px 0px #ffffff); } footer#footerArea { clear:both; width:100%; height: auto; background:url(/media/5ed22a28da775796-1800.webp); } #footerArea div.inner { margin:0 auto; padding:0; padding-top: 70px; padding-bottom: 40px; width:100%; } #footerArea div.inner:after { content: ""; clear: both; display: block; } #footerArea div.logoArea { float:none; margin-right:0px; text-align: center; margin: auto; width:100%; } .logo { display: none; } #footerArea div.logoArea dd { font-size: 13px; text-align: center; color:#e3e2e2; margin-top: 20px; margin-bottom: 40px; } .logo2 { margin-bottom:15px; display: block; } #footerArea div.linkArea { float:none; width:100%; margin: 0; } #footerArea div.linkArea ul { float:none; margin-right:0px; text-align: center; } #footerArea div.linkArea ul li { margin: 0 100px; } #footerArea div.linkArea ul li a { padding-left:0px; width: 100%; margin: auto; font-size: 13px; color:#e3e2e2; background:none; } #footerArea div.linkArea ul li a:hover { color:#ccc; text-decoration:none; } .linkArea nav span { display: block; text-align: center; margin: auto; margin-top: 5px; } .linkArea nav span a { font-size: 13px; } ul#pageTop { display: none; } ul#pageTop a { display: none; } } .hum { display: none; } .menu__list a { color:#ffffff; list-style: none; } @media screen and (max-width:767px) { .hum { width: 100%; display: block; right: 0; } .header__menu { position: fixed; z-index: 999; top: 49px; width: 100%; height: calc(100vh - 49px); background-image: url(/media/c6f133c150b74847-1800.webp); background-size: cover; opacity: 1; visibility: hidden; transition: opacity .2s ease; margin: 0 0 0 -10px; } .header__menu:has(+ .header__menu-input:checked ) { opacity: 1; visibility: visible } .menu__list { border: none; padding-top: 40px; } .menu__item { border: none; } .menu__link { display: block; text-align: left; padding: 8px 65px; color: #e3e3e3; } .header__menu-label { position: relative; display: flex; justify-content: right; align-items: end; margin-left: 80vw; width: 50px; height: 50px; cursor: pointer; } .header__menu-label span:nth-child(-n+3) { position: absolute; display: block; width: 30px; height: 2px; background: #ffffff; } .header__menu-label span:nth-child(1) { top: 10px; transition: all .2s ease; } .header__menu-input:checked + .header__menu-label span:nth-child(1) { top: 20px; transform: rotate(45deg); } .header__menu-label span:nth-child(2) { top: 18px; transition: opacity .2s ease; } .header__menu-input:checked + .header__menu-label span:nth-child(2) { opacity: 0; } .header__menu-label span:nth-child(3) { top: 26px; transition: all .2s ease; } .header__menu-input:checked + .header__menu-label span:nth-child(3) { top: 20px; transform: rotate(-45deg); } .header__menu-label span:nth-child(4) { font-size: 10px; color: #ffffff; } .header__menu-input { display: none; } } section { clear:both; } section h2 { font-size:35px; text-align:center; } body#orderkagu section.sec02 h2, body#order section.sec02 h2 { margin: 0 auto; width: 960px; padding-bottom: 45px; font-size: 26px; text-align: left; } section h2 p { line-height:2; } .sec01:after, .sec02:after, .sec03:after, .sec02 .photoArea:after, .modalArea ul:after { content: ""; clear: both; display: block; } .sec01-title2 { display: none; } .sec01-subtitle2 { display: none; } .c_txt{ font-size: 185%; } .figure-img2 { display: none; } .photoAreatypeL-img2 { display: none; } .photoAreatypeL2-img2 { display: none; } .photoAreatypeR-img2 { display: none; } .insta_list{ display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 3vw 0 2vw; } .insta_list img{ width: 220px; height: 220px; padding: 0.35vw; object-fit: cover; } .insta_list img:hover{ opacity: 0.5 ; } section.sec04 { margin: 0 auto; padding: 0px 0 0 0; width: 960px; padding-bottom: 50px; } section.sec01 { margin:0 auto; width:960px; padding-bottom:50px; } section.subtop { margin-top:400px; } .sec01 h1 { margin-bottom: 60px; line-height: 1.2; font-size: 35px; text-align: center; } .sec01 h2 { margin-bottom:60px; line-height:1.2; font-size: 35px;} .sec01 h2 span { font-size:18px; } .sec01 h3 { margin-left: 1em; } .sec01 .addtxt { margin-right: 1em; } .sec01 figure { float:left; width:440px; } .sec01 div.txtBox { float:right; width:480px; } .sec01 div.txtBox p { padding-bottom:25px; } .sec01 .br { font-size: 60%; } .sec01 .br::before { content: "\A"; white-space: pre; } section.subtop320 { margin-top:320px !important; } section.sec02 { padding:75px 0 65px 0; background:url(/media/d16c25482b1f8a3b-1800.webp) repeat-y center top; } .sec02 div.inner { margin:0 auto; width:960px; } .inner-title { display: none; } .inner-subtitle { display: none; } .sec02 h2 { margin-bottom:45px; } .sec02 div.photoArea { clear:both; padding-bottom:90px; } .sec02 h3 { width:110px; } .sec02 dl { width:700px; } .sec02 dt { margin-bottom:25px; } .sec02 ul h3{ width:100%; margin-bottom: 12px; line-height: 1.2; font-size: 22px; text-align: center; } .sec02 div.modalArea ul{ margin: 0 auto; width: 960px; } .sec02 div.modalArea ul li{ margin: 0 10px 30px 10px; } .sec02 figure{ width: 300px; } .typeL h3 { float:left; margin-left:85px; } .typeL dl { float:right; } .typeR h3 { float:right; margin-right:100px; } .Rtitle { display: none; } .Rsubtitle { display: none; } .typeR dl { float:left; } .inner-title2 { display: none; } .inner-subtitle2 { display: none; } section.sec03 { margin:0 auto; padding:80px 0 0 0 ; width:960px; padding-bottom:50px; } .sec03 h1 { margin-bottom: 60px; line-height: 1.2; font-size: 35px; text-align: center; } .sec03 h2 { margin-bottom: 30px; line-height: 1.6; font-size: 26px; text-align: left; } #home .sec03 h2 { font-size: 35px; text-align: center; } .sec03 h3 { margin-bottom: 12px; line-height: 1.2; font-size: 22px; text-align: center; } .sec03 p { margin-bottom: 60px; } div.modalArea ul { margin:0 0 40px 15px; } div.modalArea ul li { float:left; margin:0 30px 30px 0; } div.modalArea li a { display:block; padding:5px; width:200px; height:200px; border:1px solid #e3e2e2; } div.modalArea li a { display:block; padding:5px; width:200px; height:200px; border:1px solid #e3e2e2; } div.modalArea li a:hover { opacity:0.90; filter:alpha(opacity=90); } .modal-wrapper { display: none; } .sec03 ul.btnList { text-align:center; } .insta2 { display: none; } .sec03 figure { float: left; width: 200px; } .sec03 figure figcaption{ font-size: 12px; } .sec03 figure figcaption a{ display: inline; text-decoration: underline; padding: 0; border: none; } .sec03 div.txtBox { float:right; width:480px; } .sec03 div.txtBox p { padding-bottom:25px; } .sec03 .btnList{text-align: center;} section.sec04 { margin:0 auto; padding:80px 0 0 0 ; width:960px; padding-bottom:50px; } .sec04 h1 { margin-bottom: 60px; line-height: 1.2; font-size: 35px; text-align: center; } .btn, a.btn, button.btn { font-size: 1.2rem; font-weight: 600; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 3rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; border-radius: 0.5rem; } .btn--black, a.btn--black { color: #fff; background-color: #323333; } .btn--black:hover, a.btn--black:hover { color: #fff; background: #565555 } .btn:before{ display: block; padding: 16px 16px 16px 40px; background-position: left 16px center; background-repeat: no-repeat; background-size: 48px 60px; overflow-wrap: break-word; } .btnKaku, a.btnKaku, button.btnKaku { font-size: 1.2rem; font-weight: 600; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 3rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; } .btn--black, a.btn--black { color: #fff; background-color: #323333; } .btn--black:hover, a.btn--black:hover { color: #fff; background: #565555 } img.zumen { width: 886px; height: 600px; } @media screen and (max-width: 767px) { section { clear:both; } section h2 { font-size:40px; position: relative; text-shadow: 2px 2px 5px rgb(255, 255, 255); z-index: 999; text-align:center; } body#orderkagu section.sec02 h2, body#order section.sec02 h2 { width: 92vw; padding-bottom: 0; } section h2 p { line-height:2; } .sec01:after, .sec02:after, .sec03:after, .sec02 .photoArea:after, .modalArea ul:after { content: ""; clear: both; display: block; } .sec01-title { display: none; } .sec01-title2 { display: block; } .sec01-subtitle2 { display: block; } .c_txt{ font-size: 185%; } .figure-img1 { display: none; } .figure-img2 { display: block; width: 100%; } .photoAreatypeL-img1 { display: none; } .photoAreatypeL-img2 { display: block; width: 100%; } .photoAreatypeR-img1 { display: none; } .photoAreatypeR-img2 { display: block; width: 100%; } .photoAreatypeL2-img1 { display: none; } .photoAreatypeL2-img2 { display: block; width: 100%; } .insta_list{ display: flex; flex-wrap: wrap; justify-content: center; list-style: none; margin: 0; width: 100%; } .insta_list img{ width: 20vw; height: 220px; padding: 0.35vw; object-fit: cover; } .insta_list img:hover{ opacity: 0.5 ; } section.sec04 { margin: 0 auto; padding: 0px 0 0 0; width: 100%; padding-bottom: 50px; } section.sec01 { text-align: center; margin:0; width:100%; padding-bottom:0; } body#home section.sec01 { display: none; } section.subtop { margin-top:100px; } .sec01-title2 { font-size: 20px; text-align: center; text-shadow: 1px 1px 1px #ffffff; position: relative; z-index: 999; margin-top: -30vh; margin-bottom: 20px; } .sec01-subtitle2 { text-align: center; text-shadow: 1px 1px 1px #ffffff; position: relative; z-index: 999; margin-bottom: 93px; } .photoArea { display: flex; flex-direction: column-reverse; } .photoArea2 { display: flex; flex-direction: column; } .sec01 h2 { margin-bottom:60px; line-height:1.2; } .sec01 h2 span { font-size:18px; } .sec01 figure { float:none; width:100%; } .sec01 div.txtBox { float:none; width:100%; } .sec01 div.txtBox p { margin: 0 5vw; font-size: 16px; padding-bottom:3vh; text-align: left; } section.subtop320 { margin-top:100px !important; } section.sec02 { padding:0; margin:0 ; background:url(/media/d16c25482b1f8a3b-1800.webp) repeat-y center top; } .sec02 div.inner { margin:auto; width:100%; } .inner-title { font-size: 24px; font-weight: bold; text-align: center; display: block; margin-top: -2vh; margin-bottom: 1vh; } .inner-subtitle { font-size: 14px; font-weight: bold; text-align: center; display: block; margin-bottom: 3vh; } .sec02 h2 { font-size: 24px; margin-bottom:0px; line-height: 4; margin-top: 0; } #photoAreatypeL h3 img { display: none; } .sec02 div.photoArea { clear: none; padding-bottom:20px; } .sec02 h3 { width:110px; } .sec02 dl { width:100%; } .sec02 dt { margin-bottom:25px; width: 100%; } .sec02 div.modalArea ul{ width: 100%; } .sec02 div.modalArea ul li{ margin: 0 20px 30px 0px; } .sec02 figure{ width: 100%; } .sec02 figcaption{ width: 92%; margin: 0; padding: 1em 1em 0; } .sec02 div.modalArea ul.size300 li img{ width: 100vw; height: 180px; } .sec02 dt img { width: 100%; } .sec02 dd { font-size: 16px; margin: 0 3vw; margin-bottom: 15px; } .typeL h3 { float:none; margin-left:0; } .typeL dl { float:none; width: 100%; } #photoAreatypeR h3 img { display: none; } .typeR h3 { float:none; margin-right:0; } .Rtitle { font-size: 24px; font-weight: bold; text-align: center; display: block; margin-top: 0; } .Rsubtitle { font-size: 14px; font-weight: bold; text-align: center; display: block; margin-bottom: 10px; } .typeR dl { float:none; width: 100%; } .inner-title2 { font-size: 24px; font-weight: bold; text-align: center; display: block; margin-top: 0; } .inner-subtitle2 { font-size: 14px; font-weight: bold; text-align: center; display: block; margin-bottom: 10px; } #photoAreatypeL2 h3 img { display: none; } section.sec03 { margin:0 0; padding:0 0; width:100%; padding-bottom:50px; } .sec03 p, .sec03 ul { margin-right: 5vw; margin-left: 5vw; } .sec03 h2 { margin-bottom:30px; font-size: 26px; margin-top: 10px; margin-right: 5vw; margin-left: 5vw; } section.sec04 { margin:0 0; padding:0 0; width:100%; padding-bottom:50px; } .sec04 p { margin-right: 5vw; } .modal-wrapper { display: flex; justify-content: space-between; margin-bottom: 40px; margin-left: 5vw; margin-right: 5vw; } div.modal-wrapper ul { margin:0 0 40px 15px; } div.modal-wrapper ul li { float:none; margin:0 30px 30px 0; } div.modalArea2 li a { display:block; padding:5px; width:50%; height:160px; border:1px solid #e3e2e2; } div.modalArea2 li a:hover { opacity:0.90; filter:alpha(opacity=90); } .sec03 ul.btnList { text-align:center; } .insta1 { display: none; } .insta2 { display: block; background-size: cover; height: auto; } .insta2 img { width: 100%; } img.zumen { width: 100vw; height: 100%; } .sec03 figure { width: 43vw; } div.cvarea{ display: none; } div.sp_tel{ text-align: center; font-size: 24px; margin: 20px auto; } } @media screen and (min-width: 767px) { div.sp_cvr{display: none;} .hi55{height: 55px; } } section.sec00 { margin:420px auto 0; width:960px; padding-bottom:50px; } .sec00 h2 { margin-bottom:60px; line-height:1.2; } .sec00 h2 span { font-size:18px; } .sec00 h3 { margin-bottom:30px; line-height:1.2; font-size:26px;} .sec00 h3 span { font-size:16px; } .sec00 p { margin-bottom: 60px; } .sec00 figure { float:left; width:440px; } .sec00 div.txtBox { float:right; width:480px; } .sec00 div.txtBox p { padding-bottom:25px; } section.sec00_01 { margin:420px auto 0; width:960px; padding-bottom:50px; } .sec00_01 h1 { margin-bottom:60px; line-height:1.2; font-size: 35px; text-align: center;} .sec00_01 h1 span { font-size:18px; } .sec00_01 h2 { margin-bottom:30px; line-height:1.2; font-size:26px;} .sec00_01 h2 span { font-size:16px; } .sec00_01 h3 { margin-bottom:12px; line-height:1.2; font-size:22px;} .sec00_01 p { margin-bottom: 60px; } .sec00_01 figure { float:left; width:200px; } .sec00_01 figure figcaption{ font-size: 12px; } .sec00_01 figure figcaption a{ display: inline; text-decoration: underline; padding: 0; border: none; } .sec00_01 div.txtBox { float:right; width:480px; } .sec00_01 div.txtBox p { padding-bottom:25px; } .sec00_01 .btnList{text-align: center;} section.sec00_02 { margin:60px auto 0; width:960px; padding-bottom:50px; } .sec00_02 h1 { margin-bottom:60px; line-height:1.2; } .sec00_02 h1 span { font-size:18px; } .sec00_02 h2 { margin-bottom:30px; line-height:1.6; font-size:26px;} .sec00_02 h2 span { font-size:16px; } .sec00_02 h3 { margin-bottom:12px; line-height:1.2; font-size:22px; text-align: center;} .sec00_02 p { margin-bottom: 60px; } .sec00_02 figure { float:left; width:285px; } .sec00_02 div.txtBox { float:right; width:480px; } .sec00_02 figcaption{ margin-top: 12px; } .sec00_02 div.txtBox p { padding-bottom:25px; } div.hyouarea { background-color: #fcfaf0; width: 550px; margin: 0 auto 60px; border: 1px solid #c8b180; clear: both; padding: 30px 90px 0px 120px; } div.hyouarea dl dt{ float: left; width: 70px; padding: 0 45px 8px 0; border-right: 1px solid #c8b180; clear: both; } div.hyouarea dl dd{ float: right; width: 260px; } div.cvarea { background-color: #fcfaf0; width: 600px; margin: 0 auto 60px; border: 1px solid #c8b180; clear: both; padding: 30px 90px 0px 120px; } div.cvarea dl dt{ float: left; padding: 0 45px 0 0; border-right: 1px solid #c8b180; clear: both; } div.cvarea dl dd{ float: right; font-size: 30px; } div.cvarea dl dd:before{ content:"☎"; position: relative; top: 8px; left: 0px; } .in01{ margin: 0 auto 60px; display: block; } .addtxt{ float: right; font-size: 78%; color: #A1A1A1; text-align: right; margin-top: 1em; } .field { margin: 0px 0px 34px 0px; } .head { display: block; float: left; width: 140px; margin: 0px 10px 0px 0px; padding: 5px 0px 0px 0px; text-align: right; } .require { color: #FF0000; } .textarea { height: 150px; } form#contactform{ width: 700px; margin: 0 auto; } .black{ margin: 0 auto; display: block; padding: 16px 80px; } span.furus{ font-size: 14px; } span.furus a{ color: #e3e2e2; } p.atxt a{ text-decoration: underline; } table.company { width: 900px; margin: 0 auto 35px; border-collapse: separate; border-spacing: 0px 15px; font-size: 12px; } table.company th, table.company td { padding: 10px; } table.company th { background: #B38D49; vertical-align: middle; text-align: left; width: 100px; overflow: visible; position: relative; color: #fff; font-weight: normal; font-size: 15px; } table.company th:after { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(136, 183, 213, 0); border-left-color: #B38D49; border-width: 10px; margin-top: -10px; } @-moz-document url-prefix() { table.company th::after { float: right; padding: 0; left: 30px; top: 10px; content: " "; height: 0; width: 0; position: relative; pointer-events: none; border: 10px solid transparent; border-left: #295890 10px solid; margin-top: -10px; } } table.company td { background: #f8f8f8; width: 360px; padding-left: 30px; } .r_btn { background: #181717; border: 1px solid #181717; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: #FFF; width: 100px; padding: 15px 0; width: 380px; text-align: center; margin: 0 auto; } .r_btn a{ color: #FFF; } .r_btn a:hover{ color: #FFF; text-decoration: none; } ul.cat_year{ text-align: center; margin-bottom: 30px; } ul.cat_year li{ display: inline; font-size: 20px; padding: 0 10px; } ul.cat_year li.onyear{ text-decoration: underline; } ul.cat_year li.offyear a, ul.cat_year li.offyear a:active, ul.cat_year li.offyear a:visited{ color: #b5b5b5; } div.modalArea li img { width: 200px; height: 200px; object-fit: cover; } @media screen and (max-width: 767px) { div.hyouarea { width: 80%; margin: 0 auto 60px; padding: 5vw 0vw 10vw 5vw; } div.hyouarea dl dt { width: 20%; } div.hyouarea dl dd { float: right; width: 60%; } } div.modalArea ul.size300 li img { width: 280px; height: 186px; object-fit: cover; } .btn, a.btn, button.btn { font-size: 1.2rem; font-weight: 600; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 3rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; border-radius: 0.5rem; } .btn--black, a.btn--black { color: #fff; background-color: #323333; } .btn--black:hover, a.btn--black:hover { color: #fff; background: #565555 } .btn:before{ display: block; padding: 16px 16px 16px 40px; background-position: left 16px center; background-repeat: no-repeat; background-size: 48px 60px; overflow-wrap: break-word; } .btnKaku, a.btnKaku, button.btnKaku { font-size: 1.2rem; font-weight: 600; line-height: 1.5; position: relative; display: inline-block; padding: 1rem 3rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-transition: all 0.3s; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; color: #212529; } .btn--black, a.btn--black { color: #fff; background-color: #323333; } .btn--black:hover, a.btn--black:hover { color: #fff; background: #565555 } a.btnKaku:before{ display: block; padding: 16px 16px 16px 40px; background-position: left 16px center; background-repeat: no-repeat; background-size: 48px 60px; overflow-wrap: break-word; } #gNavR li a { background:url(/media/68b2d29385d58442-1800.webp) no-repeat left top; } #gNavR li.ac a, #gNavR li a:hover { background: url(/media/689438958d76bc58-1800.webp) no-repeat left top; } #gNavR li.l01 a {background-position:-201px top;} #gNavR li.l02 a { background-position:-151px top; } #gNavR li.l03 a { background-position:-101px top; } #gNavR li.l04 a { background-position:-51px top; } #gNavR li.l05 a { background-position:left top; width:51px!important; } #gNavL { width: 202px; } #gNavL li a { background:url(/media/fffd0bb9d4bf3937-1800.webp) no-repeat left top; } #gNavL li.ac a, #gNavL li a:hover { background:url(/media/911d5fe56735bf45-1800.webp) no-repeat left top; } #gNavL li.l01 a { background-position:-152px top; } #gNavL li.l02 a { background-position:-102px top; } #gNavL li.l03 a { background-position:-51px top; } #gNavL li.l04 a { background-position:leftpx top; width:51px!important; } .gmap { height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; } .gmap iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } .table_design01 { border-collapse: collapse; width: 90%; margin-bottom: 60px; } .table_design01 th, .table_design01 td { border: 2px solid #fff; background-color: #f3f3f3; padding: 1em; } .table_design01 th { background-color: #545454; color: #fff; font-weight: bold; text-align: center; width: 20%; min-width: 4em; } .sec03 .table_design01 ul { margin-right: 0; margin-left: 0; } .Form { margin-top: 80px; margin-left: auto; margin-right: auto; max-width: 720px; } @media screen and (max-width: 480px) { .Form { margin-top: 40px; } } .Form-Item { padding-top: 24px; padding-bottom: 24px; width: 92%; display: flex; align-items: center; } @media screen and (max-width: 480px) { .Form-Item { padding-left: 14px; padding-right: 14px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; } } .Form-Item-Label { width: 100%; max-width: 248px; letter-spacing: 0.05em; font-weight: bold; font-size: 18px; } .lbel_margin{ margin: 1em 1em 0 0.3em; } .radiotop{ margin-left: 2.5em; margin-top:1em } @media screen and (max-width: 480px) { .Form-Item-Label { max-width: inherit; display: flex; align-items: center; font-size: 15px; } } .Form-Item-Label.isMsg { margin-top: 8px; margin-bottom: auto; } @media screen and (max-width: 480px) { .Form-Item-Label.isMsg { margin-top: 0; } } .Form-Item-Label-Required { border-radius: 6px; margin-right: 8px; padding-top: 8px; padding-bottom: 8px; width: 48px; display: inline-block; text-align: center; background: #545454; color: #fff; font-size: 14px; } @media screen and (max-width: 480px) { .Form-Item-Label-Required { border-radius: 4px; padding-top: 4px; padding-bottom: 4px; width: 32px; font-size: 10px; } } .Form-Item-Input { border: 1px solid #ddd; border-radius: 6px; margin-left: 40px; padding-left: 1em; padding-right: 1em; height: 48px; flex: 1; width: 92%; max-width: 320px; background: #eaedf2; font-size: 18px; } @media screen and (max-width: 480px) { .Form-Item-Input { margin-left: 0; margin-top: 18px; height: 40px; flex: inherit; font-size: 15px; } } .Form-Item-Textarea { border: 1px solid #ddd; border-radius: 6px; margin-left: 40px; padding-left: 1em; padding-right: 1em; padding-top: 1em; height: 216px; flex: 1; width: 100%; max-width: 320px; background: #eaedf2; font-size: 18px; } @media screen and (max-width: 480px) { .Form-Item-Textarea { margin-top: 18px; margin-left: 0; height: 200px; flex: inherit; font-size: 15px; } } .Form-Btn { border-radius: 6px; margin-top: 32px; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; width: 280px; display: block; letter-spacing: 0.05em; background: #545454; color: #fff; font-weight: bold; font-size: 20px; } @media screen and (max-width: 480px) { .Form-Btn { margin-top: 24px; padding-top: 8px; padding-bottom: 8px; width: 160px; font-size: 16px; } } @media screen and (max-width: 480px) { form#contactform { width: 100%; } } @media screen and (max-width: 767px) { div.modalArea ul li { margin: 0 3vw 3vw 0; } div.modalArea li a { width: 41vw; height: 41vw; } div.modalArea li img { width: 41vw; height: 41vw; } } /* Keep the original paper, gold, wood photography and Mincho typography. */ :root { --ink:#282821; --gold:#ad8e4a; --paper:#fcfaf2; --line:#d8ccb0; --site-font:"Moriya Navigation Mincho","Hiragino Mincho ProN","Yu Mincho",serif; } html { scroll-behavior:smooth; scroll-padding-top:90px; } body { min-width:0; margin:0; color:var(--ink); font-family:var(--site-font); } body,p,li,dt,dd,th,td,figcaption,h1,h2,h3,h4,h5,h6,form,button,input,textarea,select,optgroup { font-family:var(--site-font)!important; } *,*::before,*::after { box-sizing:border-box; } img { max-width:100%; height:auto; } a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #716127; outline-offset:4px; } button,input,textarea { font:inherit; } button { cursor:pointer; } [hidden] { display:none!important; } .visually-hidden { position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } .skip-link { position:fixed; top:8px; left:8px; z-index:20000; padding:12px 20px; background:white; transform:translateY(-160%); } .skip-link:focus { transform:none; } header#headerArea { min-width:0; z-index:10; } header#headerArea div.inner { width:min(960px,calc(100% - 40px)); } header#headerArea div.inner #siteLogo { padding-top:50px; } header#headerArea nav a { text-indent:0; } #gNavR,#gNavL { position:absolute; top:80px; width:auto; } #gNavR { right:0; } #gNavL { left:70px; } #gNavR ul,#gNavL ul { display:flex; flex-direction:row-reverse; } #gNavR li,#gNavL li { float:none; } #gNavR li a,#gNavL li a,#gNavR li a:hover,#gNavL li a:hover { background:none; writing-mode:vertical-rl; width:50px!important; min-height:160px; padding:8px 13px; border-right:1px solid #ab946749; color:var(--ink); font-size:16px; letter-spacing:.12em; line-height:1.6; } #gNavR li a,#gNavL li a,header#headerArea .mobile-menu a { font-family:var(--site-font); font-weight:400; } #gNavR li a:hover,#gNavL li a:hover,#gNavR li a[aria-current],#gNavL li a[aria-current] { background:linear-gradient(to bottom,rgba(99,46,30,.196) 0%,rgba(99,46,30,.196) 25%,rgba(99,46,30,.106) 50%,rgba(99,46,30,0) 100%); text-decoration:none; } header#headerArea .mobile-menu a:hover { background:rgba(99,46,30,.09); text-decoration:none; } header#headerArea .add { writing-mode:vertical-rl; font-size:13px; letter-spacing:.13em; top:88px; left:4px; height:230px; } header#headerArea .add span { display:block; } .hero { position:relative; margin:300px 0 80px; height:610px; overflow:hidden; background:#584935; } .hero .hero-frame { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 2s ease-in-out; } .hero .hero-frame.is-active { opacity:1; } .hero .hero-frame.is-entering { z-index:1; opacity:1; } .hero-visual { position:relative; height:100%; } .hero-intro,.hero-copy { display:none; } main#mainArea { width:100%; } main#mainArea:focus { outline:none; } section.sec00,section.sec00_01,section.sec00_02,section.sec01,section.sec03,section.sec04 { width:min(960px,calc(100% - 48px)); margin-left:auto; margin-right:auto; } .sec02 div.inner { width:min(960px,calc(100% - 48px)); } .subtop,.subtop320 { margin-top:400px!important; } section.subtop .page-title { font-size:35px; text-align:center; margin-bottom:30px; line-height:1.5; } .cat_year { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; margin:0 auto 32px; padding:0; width:100%; max-width:800px; } .cat_year li { float:none!important; margin:0!important; padding:0!important; } .cat_year a { display:block; padding:8px 12px; border:1px solid var(--line); min-height:44px; } .cat_year a[aria-current] { background:var(--ink); color:white; border-color:var(--ink); } ul.cat_year li.offyear a,ul.cat_year li.offyear a:visited,ul.cat_year li.offyear a:active { color:#46463e; } ul.cat_year li.offyear a[aria-current],ul.cat_year li.offyear a[aria-current]:visited,ul.cat_year li.offyear a[aria-current]:active { color:white; } .modalArea { width:100%; } div.modalArea ul.photo-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; width:100%; margin:0 0 40px; padding:0; } div.modalArea ul.photo-grid::after { display:none; } div.modalArea ul.photo-grid li { width:auto; float:none; margin:0!important; } div.modalArea ul.photo-grid li a { width:100%; height:auto; display:block; padding:5px; border:1px solid var(--line); background:#fff; } div.modalArea ul.photo-grid li img { width:100%; height:auto; aspect-ratio:1; object-fit:cover; display:block; } .addtxt { margin-bottom:12px; color:#625d53; } .sec01 h3 { margin-left:0; } .slider { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:20px; width:100%; padding:0 0 20px; margin-bottom:35px; } .slider li { flex:0 0 calc((100% - 40px)/3); scroll-snap-align:start; } .slider img { width:100%; height:auto; } .photoArea dt,.photoArea dl,.photoArea figure { max-width:100%; } div.hyouarea { height:auto!important; width:min(740px,100%); padding:28px; } div.hyouarea dl { display:grid; grid-template-columns:120px 1fr; gap:12px 20px; } div.hyouarea dl dt,div.hyouarea dl dd { width:auto; float:none; padding:0; } div.hyouarea dl dt { border-right:1px solid var(--line); } .gmap { width:100%; } .gmap iframe { display:block; border:0; height:450px; } .consultation { max-width:900px; margin:50px auto 70px; padding:40px 24px; text-align:center; border:1px solid var(--line); background:var(--paper); } .consultation h2 { font-size:24px; margin-bottom:12px; } .consultation p { margin:0 0 20px; } a.consultation-link { display:inline-block; background:var(--ink); color:white; padding:12px 32px; min-height:48px; } a.consultation-tel { display:inline-block; padding:12px 24px; min-height:48px; } footer#footerArea { padding:45px 0 20px; } footer#footerArea div.inner { display:flex; gap:45px; width:min(960px,calc(100% - 48px)); } #footerArea div.logoArea { width:320px; float:none; margin:0; } #footerArea div.logoArea p,#footerArea div.logoArea a { color:#f0ece2; font-size:13px; line-height:2; } .footer-nav { flex:1; } .footer-nav ul { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px 20px; } .footer-nav a { display:block; color:#f0ece2; padding:8px 0; font-size:13px; } .copyright { text-align:center; color:#ddd; font-size:12px; margin:30px 0 0; } .back-top { position:fixed; right:18px; bottom:18px; z-index:8; width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--line); background:var(--paper); } .photo-dialog { position:fixed; margin:auto; max-width:calc(100vw - 24px); width:1050px; max-height:calc(100dvh - 24px); padding:20px; border:0; background:#faf8f2; overscroll-behavior:contain; } .photo-dialog::backdrop { background:#000d; } .photo-dialog-inner { position:relative; } .photo-dialog figure { margin:0; padding:25px 0 0; } .photo-dialog .photo-full { display:block; margin:auto; width:auto; max-width:100%; height:auto; max-height:calc(100dvh - 220px); object-fit:contain; } .photo-dialog figcaption { text-align:center; padding:12px 8px; color:var(--ink); font-size:14px; } .photo-close { position:absolute; right:0; top:0; font-size:30px; width:44px; height:44px; background:var(--paper); border:1px solid var(--line); z-index:1; } .photo-controls { display:flex; align-items:center; justify-content:center; gap:25px; } .photo-controls button { min-height:44px; min-width:90px; padding:8px 15px; border:1px solid var(--line); background:white; } .photo-controls button:disabled { opacity:.4; } .photo-direct { display:block; text-align:center; margin-top:12px; font-size:12px; text-decoration:underline!important; } .photo-open,.menu-open { overflow:hidden; } .hum { display:none; } .Form { width:100%; max-width:760px; padding:0; margin:30px auto; } .Form-Item { display:grid; grid-template-columns:180px minmax(0,1fr); align-items:start; gap:20px; width:100%; padding:24px 0; } .Form-Item-Label { max-width:none; width:auto; margin:0; font-size:16px; padding-top:10px; letter-spacing:0; } .Form-Item>div { margin-left:0!important; min-width:0; } .Form-Item-Input,.Form-Item-Textarea { box-sizing:border-box; margin:0; min-width:0; width:100%; max-width:none; font-size:16px; border:1px solid #a89c80; background:white; padding:12px; } .Form-Item-Input { height:48px; } .Form-Item-Textarea { min-height:180px; } .Form-Item input[type=radio] { margin:12px 4px 12px 0; } .Form-Item label { display:inline-block; padding:12px 10px 12px 0; } .Form-Item-Label-Required { font-size:12px; background:#6e5831; margin-right:8px; width:auto; padding:3px 6px; } .Form-Btn { margin:25px auto; background:var(--ink); min-height:48px; } @media (min-width:960px) { .sec02 dl { width:700px; } .sec01 .photoArea { display:flex; gap:40px; } .sec01 figure { flex:0 0 440px; } .sec01 div.txtBox { flex:1; width:auto; } } @media (max-width:959px) { header#headerArea { position:fixed; top:0; height:64px; background-size:cover; background-position:center; background-color:#a48d4f; } header#headerArea div.inner { width:100%; height:64px; display:flex; justify-content:space-between; align-items:center; padding:0 16px; } header#headerArea div.inner #siteLogo,#gNavR,#gNavL,header#headerArea .add { display:none; } .siteLogo2 { position:static; display:block; margin:0; padding:0; width:auto; } .siteLogo2 a { position:static; display:block; width:auto; height:auto; } .siteLogo2 a img { display:block; width:170px; max-width:none; height:auto; } .hum { display:block; width:auto; } .menu-toggle { display:flex; flex-direction:column; align-items:center; justify-content:center; width:56px; height:56px; background:none; border:0; color:white; font-size:10px; line-height:1.2; } .menu-toggle>span:first-child { font-family:sans-serif; font-size:28px; line-height:1.1; } .mobile-menu { position:fixed; top:64px; left:0; width:100%; height:calc(100dvh - 64px); overflow-y:auto; padding:12px 24px 35px; background:#f7f1df; } .mobile-menu ul { max-width:600px; margin:auto; } header#headerArea .mobile-menu a { display:block; width:auto; text-indent:0; color:var(--ink); font-size:16px; padding:14px 8px; border-bottom:1px solid var(--line); min-height:48px; } .hero { margin:64px 0 40px; height:560px; } .hero::after { content:""; position:absolute; z-index:2; inset:0; background:linear-gradient(#0001,#0008); pointer-events:none; } .hero-copy { position:absolute; z-index:3; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:24px; text-align:center; padding:30px 20px; color:white; } .hero-copy>img { width:250px; } .hero-copy p { font-size:clamp(16px,4.1vw,22px); color:white; letter-spacing:.02em; } .hero-copy span { font-size:15px; line-height:2; } section.sec00,section.sec00_01,section.sec00_02,section.sec01,section.sec03,section.sec04,.sec02 div.inner { width:calc(100% - 40px); } .subtop,.subtop320 { margin-top:110px!important; } section.subtop .page-title,.sec03 h1,.sec04 h1 { font-size:28px; margin-bottom:25px; } body#home section.sec01 { display:block; margin-top:0; } .sec01 .sec01-title { display:none; } .sec01 .photoArea { display:flex; flex-direction:column; gap:20px; } .sec01 figure,.sec01 div.txtBox { width:100%; float:none; } .figure-img1 { display:block; width:100%; } .sec01 div.txtBox p { margin:0; padding-bottom:20px; text-align:left; } .sec02 dl { width:100%; } .sec02 div.photoArea { width:100%; padding-bottom:35px; } .sec02 h3 { display:none; } .sec02 dt { margin-bottom:20px; } .photoAreatypeL-img1,.photoAreatypeR-img1,.photoAreatypeL2-img1 { display:block; } .sec02 dd { width:100%; margin:0; padding:0; } .inner-title,.inner-title2 { display:block; font-size:24px; text-align:center; margin:16px auto 10px; } .inner-subtitle,.inner-subtitle2 { display:block; font-size:15px; text-align:center; margin:0 auto 20px; } .Rtitle,.Rsubtitle { position:static; } body#orderkagu section.sec02 h2,body#order section.sec02 h2 { width:100%; } .sec00 .photoArea2,.sec00_01 .photoArea2,.sec00_02 .photoArea2 { display:flex; flex-direction:column; } .sec00 figure,.sec00_01 figure,.sec00_02 figure,.sec00 div.txtBox,.sec00_01 div.txtBox,.sec00_02 div.txtBox { width:100%; float:none; } .sec00_01 figure { max-width:350px; margin:0 auto 20px; } .sec00_02 h3 { font-size:22px; } p,li,dt,dd { font-size:16px; line-height:1.9; } .sec03 p { margin-bottom:30px; } .consultation { width:calc(100% - 40px); } footer#footerArea div.inner { flex-direction:column; gap:24px; width:calc(100% - 40px); } #footerArea div.logoArea { width:100%; text-align:center; } .footer-nav ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 20px; } .footer-nav a { min-height:44px; } } @media (max-width:600px) { .hero { height:520px; } .cat_year { gap:5px; grid-template-columns:repeat(4,minmax(0,1fr)); } .cat_year a { padding:8px 10px; font-size:14px; } div.modalArea ul.photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } .addtxt { display:block; float:none; text-align:left; } .sec01 h3 { float:none!important; text-align:left; margin:25px 0 12px; font-size:20px; } .slider li { flex-basis:85%; } div.hyouarea { padding:20px 16px; } div.hyouarea dl { grid-template-columns:76px minmax(0,1fr); gap:12px; } .hyouarea dt,.hyouarea dd { font-size:14px; overflow-wrap:anywhere; } .gmap iframe { height:340px; } .Form-Item { grid-template-columns:1fr; gap:12px; padding:20px 0; } .Form-Item-Label { padding-top:0; } .Form-Item>div[style] { flex-wrap:nowrap; } .Form-Item>div[style] input { flex:1; width:0; max-width:none!important; } .Form-Btn { width:100%; max-width:300px; } .consultation h2 { font-size:22px; } .consultation p { font-size:14px; } .photo-dialog { padding:12px; } .photo-controls { gap:14px; } .photo-controls button { min-width:80px; } } @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none!important; transition:none!important; } } /* With scripts disabled, expose navigation and ordinary image links. */ @media (max-width:959px) { .no-script-nav { margin:76px 20px 0; display:flex; flex-wrap:wrap; gap:12px; } } /* Shared consultation: paper and gold accents, with clear contact buttons. */ .consultation { width:min(960px,calc(100% - 40px)); max-width:960px; margin:64px auto 72px; padding:44px 32px; background:#f5f1e7; border:0; border-top:1px solid #d8cdb5; border-bottom:1px solid #d8cdb5; color:#3c392e; box-shadow:none; } .consultation h2 { font-size:clamp(25px,3vw,34px); line-height:1.6; color:#3c392e; margin:0 0 14px; padding:0; background:none; width:auto; height:auto; } .consultation p { color:#625d50; font-size:17px; line-height:1.9; margin:0 0 28px; } .consultation-actions { display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:760px; margin:auto; align-items:stretch; } .consultation-actions a { display:flex; align-items:center; justify-content:center; min-height:88px; padding:18px 20px; border:1px solid #bbae93; border-radius:0; text-decoration:none; line-height:1.5; } a.consultation-link { background:#716449; color:#fffdf8; font-size:21px; gap:20px; box-shadow:none; border-color:#716449; } a.consultation-link:hover { background:#5e523c; } a.consultation-tel { flex-direction:column; gap:5px; background:transparent; color:#3c392e; } .consultation-tel span { font-size:14px; } .consultation-tel strong { font-size:32px; font-weight:400; white-space:nowrap; letter-spacing:.015em; } a.consultation-tel:hover { background:#ece6d8; } /* Restore the original benefit headings and captions alongside their photos. */ body#order section.sec02,body#orderkagu section.sec02 { width:min(960px,calc(100% - 40px)); margin:72px auto; padding:0; background:none; } body#order section.sec02>h2,body#orderkagu section.sec02>h2 { width:auto; height:auto; padding:0; margin:0 0 30px; background:none; font-size:28px; text-align:center; line-height:1.6; text-indent:0; } div.modalArea ul.benefits-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } div.modalArea ul.benefits-grid li { padding:0; background:none; border:0; } div.modalArea ul.benefits-grid h3 { display:block; position:static; width:auto; height:auto; margin:22px 0 14px; padding:0 0 14px; background:none; font-size:23px; text-align:left; text-indent:0; color:var(--ink); line-height:1.5; } div.modalArea ul.benefits-grid li a { padding:0; border:0; } div.modalArea ul.benefits-grid li img { aspect-ratio:4/3; object-fit:cover; } div.modalArea ul.benefits-grid .benefit-caption { padding:0; margin:0; font-size:16px; line-height:1.9; text-align:left; } /* Numbered order cards retain the original payment and delivery terms. */ .order-steps { list-style:none; padding:0; margin:32px 0 0; counter-reset:order-step; } .order-steps>li { position:relative; counter-increment:order-step; padding:26px 28px 26px 94px; margin:0 0 20px; background:var(--paper); border:1px solid var(--line); } .order-steps>li::before { content:counter(order-step,decimal-leading-zero); position:absolute; top:25px; left:24px; width:46px; height:46px; display:grid; place-items:center; background:#6e5831; color:white; font-size:23px; } .order-steps h3 { position:static; float:none; width:auto; height:auto; padding:0; margin:0 0 12px; background:none; font-size:23px; line-height:1.5; text-indent:0; text-align:left; } .order-steps p,.order-steps p.atxt { padding:0; margin:0 0 12px; font-size:16px; line-height:1.9; } .order-steps p:last-child { margin-bottom:0; } .order-steps a { text-decoration:underline; text-underline-offset:3px; } /* Readable company and recruitment tables. */ .details-table { width:100%; border-collapse:collapse; margin:28px 0 56px; font-size:16px; line-height:1.9; border:1px solid var(--line); } .details-table caption { text-align:left; font-size:28px; margin:0 0 24px; color:var(--ink); } .details-table th,.details-table td { padding:20px 24px; border-bottom:1px solid var(--line); vertical-align:top; text-align:left; } .details-table th { width:180px; background:#efe8d7; font-weight:400; } .details-table td { background:#fffdf8; } .details-table td p,.details-table td ul { margin:0; padding:0; font-size:16px; line-height:1.9; } .details-table td li { margin:0; font-size:16px; line-height:1.9; } @media(max-width:959px) { .hero { height:auto; background:white; margin-bottom:48px; } .hero-intro { display:block; padding:26px 24px 24px; background:white; } .hero-intro p { margin:0 0 7px; font-size:12px; line-height:1.5; letter-spacing:.12em; color:#716449; } .hero-intro h2 { margin:0; font-size:clamp(18px,4.8vw,24px); font-weight:400; line-height:1.6; letter-spacing:.025em; color:var(--ink); } .hero-visual { height:min(62.5vw,480px); } .hero .hero-frame { height:100%; object-fit:cover; } .hero::after { display:none; } .hero-visual::after { content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(20,18,12,0) 0%,rgba(20,18,12,.12) 12%,rgba(20,18,12,.6) 34%,rgba(20,18,12,.76) 100%); } .hero-copy { position:absolute; inset:auto 24px 20px; margin:0; display:flex; align-items:flex-start; gap:12px; padding:0; text-align:left; background:none; color:white; } .hero-copy p { margin:0; color:white; font-size:clamp(18px,5vw,25px); font-weight:400; letter-spacing:.04em; line-height:1.7; text-shadow:0 1px 8px #0004; } .hero-copy p span { display:block; font-size:inherit; line-height:inherit; } .hero-copy>div { font-size:clamp(12px,3.1vw,15px); line-height:1.8; letter-spacing:.03em; text-shadow:0 1px 8px #0004; } .consultation { padding:36px 24px; } .consultation-actions { gap:16px; } } @media(max-width:600px) { .consultation { padding:32px 20px; } .consultation p { font-size:15px; } .consultation-actions { grid-template-columns:1fr; } .consultation-actions a { min-height:76px; padding:17px 12px; } a.consultation-link { font-size:19px; gap:12px; } .consultation-tel strong { font-size:29px; } div.modalArea ul.benefits-grid { grid-template-columns:1fr; gap:36px; } .order-steps>li { padding:22px 18px; } .order-steps>li::before { position:static; margin-bottom:14px; width:40px; height:40px; font-size:20px; } .order-steps h3 { font-size:21px; } .details-table,.details-table tbody,.details-table tr,.details-table th,.details-table td { display:block; width:100%; } .details-table th { padding:12px 18px; border-bottom:0; } .details-table td { padding:16px 18px 22px; } .details-table caption { display:block; } } /* Let photography and white space carry the benefits, with one fine gold rule. */ div.modalArea ul.benefits-grid h3::after { content:""; display:block; width:28px; height:1px; background:#ad9970; margin-top:12px; } body#home .sec02 .craft-title { width:auto; margin:0 0 54px; font-size:32px; font-weight:500; letter-spacing:.025em; line-height:1.5; text-align:center; white-space:nowrap; } body#home .sec02 .craft-title::after { content:""; display:block; width:42px; height:1px; margin:24px auto 0; background:#ad9970; } @media(max-width:959px) { body#home .sec02 .craft-title { font-size:clamp(21px,6.2vw,28px); margin-bottom:40px; } body#home .sec02 .inner-title,body#home .sec02 .inner-title2 { font-size:20px; } } @media(max-width:400px) { .hero-intro { padding-left:20px; padding-right:20px; } .hero-copy { inset:auto 20px 16px; gap:9px; } body#home .sec02 .craft-title span { display:inline; } } @media(max-width:600px) { body#home .btnList a[href*="instagram.com"] { font-size:18px; letter-spacing:.04em; padding-left:20px; padding-right:20px; white-space:nowrap; } } body#home .sec03 h2,body#home .sec04 h2 { font-size:28px; } body#home a.insta1 { display:block; width:min(680px,100%); margin:0 auto; } body#home a.insta1 img { display:block; width:100%; height:auto; } /* Keep content below the fixed navigation, including legacy positioned headings. */ header#headerArea { z-index:1000; } main#mainArea { isolation:isolate; } main#mainArea h2,.hero-intro h2 { z-index:auto; } .hero { isolation:isolate; } /* Give the craft background its own breathing room without widening the content. */ body#home section.sec02 { margin-top:64px; padding:72px 0; } body#home .sec02 div.photoArea:last-child { padding-bottom:0; } body#home .sec02 div.photoArea:last-child>p:last-child { margin-bottom:0; } /* Remove inherited inner padding so the footer has a single spacing rhythm. */ footer#footerArea { padding:36px 0 24px; } footer#footerArea div.inner { padding:0; align-items:flex-start; gap:36px; } #footerArea .logoArea>a { display:block; } #footerArea .logoArea>a img { display:block; } #footerArea .logoArea p { margin:14px 0 0; line-height:1.85; } .footer-nav ul { margin:0; padding:0; list-style:none; gap:0 24px; } .footer-nav li { margin:0; padding:0; } .footer-nav a { padding:8px 0; line-height:1.65; } footer#footerArea .copyright { margin:24px 0 0; padding:0; line-height:1.8; } @media(max-width:959px) { body#home .sec03 h2,body#home .sec04 h2 { font-size:22px; } body#home section.sec02 { margin-top:40px; padding:48px 0; } footer#footerArea { padding:32px 0 20px; } footer#footerArea div.inner { gap:22px; align-items:stretch; } #footerArea .logoArea>a img { margin:0 auto; } .footer-nav ul { gap:0 24px; } .footer-nav a { display:flex; align-items:center; min-height:44px; padding:8px 0; } footer#footerArea .copyright { margin-top:22px; } .mobile-menu ul { padding:0; margin:0 auto; list-style:none; } .mobile-menu li { margin:0; padding:0; } header#headerArea .mobile-menu a { display:flex; align-items:center; min-height:52px; padding:10px 8px; line-height:1.6; } }