@charset "utf-8"; @font-face {font-family: "Noto Sans JP"; src: url("../fonts/NotoSansJP-Regular.ttf") format("truetype"); font-weight: 400;} @font-face {font-family: "Noto Sans JP"; src: url("../fonts/NotoSansJP-SemiBold.ttf") format("truetype"); font-weight: 600;} @font-face {font-family: "Noto Sans JP"; src: url("../fonts/NotoSansJP-Black.ttf") format("truetype"); font-weight: 900;} /* reset */ /* -------------------------------------------------------- */ 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;} html {width:100%; height:100%; overflow-y:scroll;} h1,h2,h3,h4,h5,h6 {font-size:100%; font-weight:700;} p, ul, ol, dl, address, blockquote, table, div {font-size:100%;} p {margin:0 0 0 0;} ol,ul {list-style:none;} fieldset,img {border:0; vertical-align:top;} table {border-collapse:collapse; border-spacing:0;} caption,th {text-align:left;} th {vertical-align:top; font-weight:400; text-align:left;} td {vertical-align:top;} address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:400;} q:before,q:after {content:'';} abbr,acronym {border:0;} :root { --fs10: 1.0rem; --fs11: 1.1rem; --fs12: 1.2rem; --fs13: 1.3rem; --fs14: 1.4rem; --fs15: 1.5rem; --fs16: 1.6rem; --fs17: 1.7rem; --fs18: 1.8rem; --fs20: 2.0rem; --fs24: 2.4rem; --fs30: 3.0rem; --fs36: clamp(2.0rem, 3.6vw, 3.6rem); --bg-line: url("data:image/svg+xml;utf8,") center / 100% 100% no-repeat; } /* common */ /* -------------------------------------------------------- */ html,body {font-variant-ligatures:none;} html {font-size:62.5%;} body {font-size:var(--fs14); font-weight:400; font-family:"Noto Sans JP", sans-serif; line-height:1.6; letter-spacing:0.1em; color:#333; text-align:center; -webkit-text-size-adjust:100%; text-size-adjust:100%; background:url(../img/bg.webp) center center repeat-y; background-size:100% auto;} h1, h2, h3, h4, h5, h6, h7 {line-height:1.2;} p, li, dt, dd, th, td, address, blockquote, div {line-height:inherit; text-align:inherit;} input, select, option, textarea, button {font-size:var(--fs16); font-family:"Noto Sans JP", sans-serif; line-height:1; vertical-align:middle; text-align:inherit; color:inherit; outline:none;} textarea {line-height:1.4;} input[type='submit'],input[type='reset'],input[type='button'], button {cursor:pointer; appearance:none;} :placeholder-shown {color:#999;} ::-webkit-input-placeholder {color:#999;} :-moz-placeholder {color:#999; opacity:1;} ::-moz-placeholder {color:#999; opacity:1;} :-ms-input-placeholder {color:#999;} strong {font-weight:900;} ol {list-style-type:decimal; margin-left:2.2em;} img {max-width:100%; width:auto; height:auto; line-height:0; vertical-align:top; border:0; display:inline;} a {color:#000; text-decoration:underline;} a:hover {color:#000; text-decoration:none;} /* decision */ /* -------------------------------------------------------- */ #bpCheck {display:none;} body .pc {display:block;} br.pc, span.pc, img.pc {display:inline;} body .sp, br.sp, span.sp, img.sp {display:none;} body #container {transition:transform 0.6s 0.1s ease, opacity 0.6s 0.1s ease;} body.scrollUp #container {transform:translate3d(0,-20px,0); opacity:0; transition:transform 0s 0s ease, opacity 0s 0s ease;} body.scrollDown #container {transform:translate3d(0,20px,0); opacity:0; transition:transform 0s 0s ease, opacity 0s 0s ease;} a.off {pointer-events:none; cursor:default; opacity:0.3;} a[href^="tel:"] {pointer-events:none; cursor:default;} body.mobile a[href^="tel:"] {pointer-events:auto; cursor:pointer;} .cfix::before, .cfix::after {display:table; content:" ";} .cfix::after {clear:both;} @media screen and (max-width:767px){ #bpCheck {display:block;} body .pc, br.pc, span.pc, img.pc {display:none;} body .sp {display:block;} br.sp, span.sp, img.sp {display:inline;} } /* container */ /* -------------------------------------------------------- */ #container {width:100%; position:relative; overflow:hidden;} /* header */ /* -------------------------------------------------------- */ #header {width:100%; position:relative;} #header .sec {max-width:100%; padding-top:1.5em; display:flex; justify-content:space-between; align-items:center;} #header .logo {font-size:var(--fs11); font-weight:400; line-height:1; letter-spacing:0; white-space:nowrap; position:relative;} #header .logo a {text-decoration:none; color:#333; display:flex; align-items:center;} #header .logo a:hover svg {opacity:0.7;} #header .logo svg {fill:#331a08; display:block; transition:opacity 0.3s ease;} #header .logo .logo1 svg {width:70px; height:22px;} #header .logo .logo2 {padding:0 0 0 10px; display:block;} #header .logo .logo2 svg {width:114px; height:34px;} #header .logo .txt {padding:0 0 0.4em 0; display:block; position:absolute; bottom:100%; left:0;} #header .logo .txt br {display:none;} #header .nav {font-size:var(--fs16); font-weight:600; color:#333; display:flex;} #header .nav > li {padding:0 1.5em; position:relative;} #header .nav > li::before {content:''; width:1px; height:0.8em; margin:-0.4em 0 0 0; background-color:#999; display:block; position:absolute; top:50%; left:0;} #header .nav > li::after {content:''; width:100%; height:2px; background:var(--bg-line); display:none; position:absolute; bottom:0; left:0; opacity:0.2;} #header .nav > li:first-of-type::before {display:none;} #header .nav > li > a {text-decoration:none; color:#333; display:block; transition:transform 0.3s ease;} #header .nav > li > a:hover {transform:translate3d(0,-0.2em,0);} #gNavBtn {width:40px; height:40px; position:fixed; top:-45px; right:5px; z-index:310; cursor:pointer; display:block;} #gNavBtn > span {width:100%; height:2px; margin:-1px 0 0 0; background-color:rgba(0,0,0,1); display:block; position:absolute; top:50%; left:0; transition-property:background-color;} #gNavBtn > span::before, #gNavBtn > span::after {content:''; width:100%; height:2px; background-color:rgba(0,0,0,1); display:block; position:absolute; left:0;} #gNavBtn > span::before {top:-10px; transition-property:top;} #gNavBtn > span::after {bottom:-10px; transition-property:bottom;} body.load #gNavBtn, body.load #gNavBtn > span::before, body.load #gNavBtn > span::after {transition-duration:0.3s; transition-delay:0s; transition-timing-function:ease;} #gNavCheck {display:none;} #gNavCheck:checked + #header #gNavBtn > span {background-color:rgba(0,0,0,0);} #gNavCheck:checked + #header #gNavBtn > span::before {top:0; transform:rotate(45deg); transition-property:transform;} #gNavCheck:checked + #header #gNavBtn > span::after {bottom:0; transform:rotate(-45deg); transition-property:transform;} body.move #header #gNavBtn {top:5px;} body.move #gNav {width:80%; height:100vh; background:url(../img/bg.webp) center center repeat-y; background-size:100% auto; box-shadow:0 0 5px rgba(0,0,0,0.2); position:fixed; top:0; right:-85%; overflow:auto; z-index:300; transition:right 0.6s ease;} body.move #gNavCheck:checked + #header #gNav {right:0;} body.move #header .nav {text-align:left; padding:60px 4vw 15px 4vw; display:block;} body.move #header .nav > li {padding:0.5em 0; position:relative; overflow:hidden;} body.move #header .nav > li::before {display:none;} body.move #header .nav > li::after {display:block;} body.move #header .nav > li > a:hover {transform:translate3d(0.2em,0,0);} body.move #header .nav > li.sp {display:block;} @media screen and (max-width:767px){ body.move #header #gNavBtn {top:10px;} #header #gNavBtn {top:10px;} #gNav {width:80%; height:100vh; background:url(../img/bg.webp) center center repeat-y; background-size:100% auto; box-shadow:0 0 5px rgba(0,0,0,0.2); position:fixed; top:0; right:-85%; overflow:auto; z-index:300; transition:right 0.6s ease;} #gNavCheck:checked + #header #gNav {right:0;} #header .nav {text-align:left; padding:50px 4vw 15px 4vw; display:block;} #header .nav > li {padding:0.5em 0; position:relative; overflow:hidden;} #header .nav > li::before {display:none;} #header .nav > li::after {display:block;} #header .nav > li > a:hover {transform:translate3d(0.2em,0,0);} } /* footer */ /* -------------------------------------------------------- */ #footer {padding:100px 0 15px 0;} #footer > .sec::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; opacity:0.7;} #footer .nav {margin:20px 0 0 0;} #footer .nav {font-size:var(--fs14); font-weight:600; color:#333; display:flex; flex-wrap:wrap; justify-content:center; position:relative;} #footer .nav li {padding:0 1.5em; position:relative;} #footer .nav li::before, #footer .nav li::after {content:''; width:1px; height:0.8em; margin:-0.4em 0 0 0; background-color:#999; display:block; position:absolute; top:50%;} #footer .nav li::before {left:0;} #footer .nav li::after {right:-1px;} #footer .nav li > a {text-decoration:none; color:#333; display:block; transition:transform 0.3s ease;} #footer .nav li > a:hover {transform:translate3d(0,-0.2em,0);} #footer .contact {margin:30px 0 0 0;} #footer .contact dt {font-size:var(--fs14); font-weight:600; line-height:1;} #footer .contact dd {font-size:var(--fs12); letter-spacing:0; margin:0.5em 0 0 0;} #footer .contact dd a {font-size:var(--fs30); font-weight:900; line-height:1; letter-spacing:0.05em; text-decoration:none; color:#000; display:block;} #footer .copy {font-size:var(--fs12); line-height:1; letter-spacing:0.05em; margin:30px 0 0 0;} #footer .pagetop {width:40px; position:fixed; bottom:-40px; right:10px; z-index:200; transition:bottom 0.3s ease;} #footer .pagetop a {display:block; transition:transform 0.3s ease;} #footer .pagetop a:hover {transform:translate3d(0,-5px,0);} #footer .pagetop svg {width:40px; height:40px; fill:#333; display:block;} body.move #footer .pagetop {bottom:10px;} @media screen and (max-width:767px){ #footer {padding:50px 0 10px 0;} #footer .nav {margin:20px 0 0 0;} #footer .nav {font-size:var(--fs13);} #footer .nav li {padding:0 0.8em;} #footer .contact {margin:30px 0 0 0;} #footer .contact dt {font-size:var(--fs13);} #footer .pagetop {width:30px; bottom:-30px;} #footer .pagetop svg {width:30px; height:30px;} body.move #footer .pagetop {bottom:5px;} } /* contents */ /* -------------------------------------------------------- */ #contents {} .sec {max-width:1030px; margin:0 auto; padding:0 15px; box-sizing:border-box;} .ttl-01 {font-size:var(--fs36); font-weight:400; text-align:center; margin:2.0em 0 1.0em 0; padding:0 0 1.0em 0; position:relative;} .ttl-01::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; position:absolute; bottom:0; left:0; opacity:0.7;} .ttl-01 + .ttl-02 {margin-top:0;} .ttl-02 {font-size:var(--fs20); font-weight:400; text-align:left; margin:3em 0 0 0; padding:0.3em 0.6em; background-color:rgba(51,26,8,0.2); border-radius:5px; position:relative;} .btn-01 {min-width:200px; height:50px; font-size:100%; text-align:center; text-decoration:none; color:#fff; margin:0 auto; padding:0 1.0em; background-color:#331a08; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border:none; border-radius:5px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; transition:transform 0.3s ease;} .btn-01:hover {text-decoration:none; color:#fff; transform:translate3d(0,-3px,0);} .btn-01[name="form_reset"], .btn-01[name="form_back"] {background-color:#666;} .price-01 {text-align:left; margin:1.0em 0 0 0;} .price-01 .ttl {font-size:var(--fs14); font-weight:900; padding:0 0 0.5em 0; position:relative;} .price-01 .ttl::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; display:block; position:absolute; bottom:0; left:0; opacity:0.3;} .price-01 dl {font-size:var(--fs18); padding:0.5em 1em; display:flex; justify-content:space-between; position:relative;} .price-01 dl::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; display:block; position:absolute; bottom:0; left:0; opacity:0.3;} .price-01 dl + .ttl {margin-top:1.0em;} .price-01 dt {text-align:left; flex:1;} .price-01 dt span {font-size:76%; letter-spacing:0;} .price-01 dd {white-space:nowrap; text-align:right; padding:0 0 0 1.0em;} .price-01 dd strong {font-size:120%; font-weight:600; display:inline-block;} .imgs-clm {margin:1.0em -2px 0 -2px; display:flex; flex-wrap:wrap;} .imgs-clm > div {width:33.33%; padding:4px 2px 0 2px; box-sizing:border-box;} .imgs-clm img {box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:10px; display:block;} ul.note {margin:1.0em 0 0 0;} ul.note > li {text-align:left; padding:0 0 0 1.2em; position:relative;} ul.note > li::before {content:'※'; display:block; position:absolute; top:0; left:0;} .faq-list dl {text-align:left; margin:1.0em 1.0em 0 1.0em;} .faq-list dt {font-size:var(--fs16); font-weight:600; padding:0 0 0 1.5em; position:relative;} .faq-list dt::before {content:'Q.'; font-weight:900; display:block; position:absolute; top:0; left:0;} .faq-list dd {margin:0 0 0 1.8em;} .faq-list dd ul {list-style-type:disc; font-size:var(--fs16); margin-left:1.5em;} .box-01 {text-align:left; margin:1.0em 0 0 0; padding:0.8em 1.0em; background-color:rgba(51,26,8,0.1); border-radius:5px;} ul.disc {list-style-type:disc; margin-left:1.5em;} ul.disc span {font-size:75%;} .mult-clm {margin:-5px -5px 0 -5px; display:flex; flex-wrap:wrap; align-items:center;} .mult-clm.center {justify-content:center;} .mult-clm > div, .mult-clm > dl {margin:5px 5px 0 5px; box-sizing:border-box; display:flex; align-items:center;} .mult-clm > div > div {margin:0 0.2em 0 0;} .mult-clm > div > div:last-of-type {margin-right:0;} .mult-clm > dl > dt {font-size:80%; line-height:1.2; white-space:nowrap; padding:0 0.2em 0 0; box-sizing:border-box;} .mult-clm > dl > dd {box-sizing:border-box;} /* flatpickr */ .flatpickr-buttons-wrapper {background-color:#fff; border:1px solid rgba(0,0,0,0.2); box-sizing:border-box; display:flex; justify-content:space-between;} .flatpickr-confirm-btn, .flatpickr-reset-btn {width:50%; font-size:10px; line-height:1; color:#000; padding:0.3em 0; background-color:rgba(0,0,0,0); border:none; box-sizing:border-box; cursor:pointer;} .flatpickr-reset-btn {border-left:solid 1px rgba(0,0,0,0.2);} .flatpickr-confirm-btn:hover, .flatpickr-reset-btn:hover {background-color:rgba(0,0,0,0.1);} @media screen and (max-width:767px){ .sec {padding:0 4vw;} .btn-01 {min-width:120px; height:40px;} .imgs-clm {margin:1.0em -1px 0 -1px;} .imgs-clm > div {padding:2px 1px 0 1px;} .imgs-clm img {border-radius:3px;} } /* top */ body.top #header .sec {max-width:1030px; padding-top:0; display:block;} body.top #header .logo {height:clamp(200px, 46.9vw, 360px); font-size:var(--fs15); line-height:1.8; letter-spacing:0.2em; padding:0 0 0 clamp(80px, 31.2vw, 240px); display:flex; justify-content:center; align-items:center;} body.top #header .logo a {display:flex; justify-content:center; align-items:center; flex-direction:column;} body.top #header .logo .logo1 svg {width:clamp(80px, 16.9vw, 130px); height:clamp(30px, 5.2vw, 40px);} body.top #header .logo .logo2 {padding:5px 0 0 0;} body.top #header .logo .logo2 svg {width:clamp(160px, 27.9vw, 214px); height:clamp(50px, 9.3vw, 72px);} body.top #header .logo .txt {padding:1em 0 0 0; display:block; position:static;} body.top #header .logo .txt br {display:inline-block;} body.top #header .nav {display:none;} body.top.move #header .nav {display:block;} .top-mv {width:100%; position:absolute; top:0; left:0; pointer-events:none;} .top-mv .imgs {width:clamp(140px, 31.8vw, 244px); height:clamp(200px, 46.9vw, 360px); margin:0 auto; position:relative; transform:translate3d(-50%,0,0); mix-blend-mode:multiply;} .top-mv .imgs > div {width:100%; height:100%; position:absolute; top:0; left:0; opacity:0; animation:mvFade 24s infinite ease-in-out;} .top-mv .imgs > div:nth-child(1) {animation-delay:0s;} .top-mv .imgs > div:nth-child(2) {animation-delay:6s;} .top-mv .imgs > div:nth-child(3) {animation-delay:12s;} .top-mv .imgs > div:nth-child(4) {animation-delay:18s;} .top-mv .imgs > div img {width:100%; display:block;} @keyframes mvFade { 0% {opacity:0;} 10% {opacity:1;} 25% {opacity:1;} 35% {opacity:0;} 100% {opacity:0;} } .top-nav {padding-bottom:12px; position:relative;} .top-nav::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; position:absolute; bottom:0; left:0; opacity:0.7;} .top-nav ul {font-size:var(--fs17); font-weight:600; color:#000; display:flex; justify-content:center; position:relative;} .top-nav li {padding:0 1.5em; position:relative;} .top-nav li::before {content:''; width:1px; height:0.8em; margin:-0.4em 0 0 0; background-color:#999; display:block; position:absolute; top:50%; left:0;} .top-nav li:first-of-type::before {display:none;} .top-nav li > a {text-decoration:none; color:#000; display:block; transition:transform 0.3s ease;} .top-nav li > a:hover {transform:translate3d(0,-0.2em,0);} .top-about {margin:50px 0 0 0;} .top-about .catch {font-size:var(--fs18);} .top-about .clms {margin:50px 0 0 0;} .top-about .clms > div {display:flex; justify-content:space-between; align-items:center;} .top-about .clms > div:nth-of-type(odd) .img {order:2;} .top-about .clms > div:nth-of-type(odd) .ctx {order:1; padding-right:3em;} .top-about .clms > div:nth-of-type(even) .img {order:1;} .top-about .clms > div:nth-of-type(even) .ctx {order:2; padding-left:3em;} .top-about .clms .img {width:360px;} .top-about .clms .img img {box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:10px; display:block;} .top-about .clms .ctx {font-size:var(--fs14); text-align:left; padding:1em 0; flex:1;} .top-photo {margin:100px 0 0 0; position:relative;} .top-photo::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; position:absolute; top:-48px; left:0; opacity:0.7;} .top-photo .ttl {font-size:var(--fs24); line-height:1; color:#000; text-shadow:1px 1px 0 rgba(255,255,255,0.7); position:absolute; top:10px; left:10px; z-index:5;} .top-photo .ttl span {font-size:200%;} .top-photo .ttl strong {font-size:60%; font-weight:400; line-height:1; text-align:center; white-space:nowrap; color:#fff; text-shadow:none; padding:0.1em 0.5em 0.3em 0.5em; background-color:rgba(51,25,8,0.6); border-radius:3px; box-sizing:border-box; display:block;} .top-photo .img {max-width:750px; width:100%; margin:0 auto;} .top-photo .img > div {width:100%; padding:68% 0 0 0; position:relative;} .top-photo .img > div img {width:100%; height:100%; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:10px; display:block; object-fit:cover; position:absolute; top:0; left:0;} .top-photo .img .txt {font-size:var(--fs16); font-weight:600; color:#fff; text-shadow:1px 1px 0 rgba(0,0,0,0.7); padding:0.2em 0.5em; position:absolute; bottom:0; right:0;} .top-info {margin:100px 0 0 0; position:relative;} .top-info::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; position:absolute; top:-50px; left:0; opacity:0.7;} .top-info .ttl {font-size:var(--fs24); line-height:1; text-align:left;} .top-info .list dl {font-size:var(--fs14); line-height:1.4; text-align:left; margin:0.5em 0 0 0; padding:0.5em 1.0em 0.5em 1.6em; background-color:rgba(255,255,255,0.8); box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:10px; box-sizing:border-box; position:relative;} .top-info .list dl::before {content:''; width:2px; height:calc(100% - 1.6em); margin:0.8em 0 0 0; background-color:#331a08; display:block; position:absolute; top:0; left:0.8em;} .top-info .list dl:first-of-type {margin-top:0.8em;} .top-info .list dt {font-weight:600; color:#000;} .top-info .list dd {margin:0.2em 0 0 0;} @media screen and (max-width:767px){ body.top #header .logo {font-size:var(--fs13); letter-spacing:0.05em;} body.top #header .nav {display:block;} .top-mv .imgs {transform:translate3d(-70%,0,0);} .top-nav ul {font-size:var(--fs14); margin:0 -0.8em;} .top-nav li {padding:0 0.8em;} .top-about {margin:30px 0 0 0;} .top-about .catch {font-size:var(--fs15);} .top-about .clms {margin:30px 0 0 0;} .top-about .clms > div {display:block;} .top-about .clms > div:nth-of-type(odd) .ctx {order:1; padding-right:0;} .top-about .clms > div:nth-of-type(even) .ctx {order:2; padding-left:0;} .top-about .clms .img {width:100%;} .top-about .clms .ctx {font-size:var(--fs13);} .top-photo {margin:60px 0 0 0;} .top-photo::before {top:-30px;} .top-photo .ttl {font-size:var(--fs18); top:6px; left:6px;} .top-photo .ttl span {font-size:200%;} .top-photo .ttl strong {font-size:60%;} .top-photo .img .txt {font-size:var(--fs12);} .top-info {margin:60px 0 0 0;} .top-info::before {top:-30px;} .top-info .ttl {font-size:var(--fs20);} } /* route */ .route-sec .map input {display:none;} .route-sec .map input:nth-of-type(1):checked + input + input + input + input + input + input + input + input + input + input + #objMap #objNav li:nth-of-type(1) label, .route-sec .map input:nth-of-type(2):checked + input + input + input + input + input + input + input + input + input + #objMap #objNav li:nth-of-type(2) label, .route-sec .map input:nth-of-type(3):checked + input + input + input + input + input + input + input + input + #objMap #objNav li:nth-of-type(3) label, .route-sec .map input:nth-of-type(4):checked + input + input + input + input + input + input + input + #objMap #objNav li:nth-of-type(4) label, .route-sec .map input:nth-of-type(5):checked + input + input + input + input + input + input + #objMap #objNav li:nth-of-type(5) label, .route-sec .map input:nth-of-type(6):checked + input + input + input + input + input + #objMap #objNav li:nth-of-type(6) label, .route-sec .map input:nth-of-type(7):checked + input + input + input + input + #objMap #objNav li:nth-of-type(7) label, .route-sec .map input:nth-of-type(8):checked + input + input + input + #objMap #objNav li:nth-of-type(8) label, .route-sec .map input:nth-of-type(9):checked + input + input + #objMap #objNav li:nth-of-type(9) label, .route-sec .map input:nth-of-type(10):checked + input + #objMap #objNav li:nth-of-type(10) label, .route-sec .map input:nth-of-type(11):checked + #objMap #objNav li:nth-of-type(11) label {color:#c00;} .route-sec .map input:nth-of-type(1):checked + input + input + input + input + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(1), .route-sec .map input:nth-of-type(2):checked + input + input + input + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(2), .route-sec .map input:nth-of-type(3):checked + input + input + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(3), .route-sec .map input:nth-of-type(4):checked + input + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(4), .route-sec .map input:nth-of-type(5):checked + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(5), .route-sec .map input:nth-of-type(6):checked + input + input + input + input + input + #objMap #objTime > p:nth-of-type(6), .route-sec .map input:nth-of-type(7):checked + input + input + input + input + #objMap #objTime > p:nth-of-type(7), .route-sec .map input:nth-of-type(8):checked + input + input + input + #objMap #objTime > p:nth-of-type(8), .route-sec .map input:nth-of-type(9):checked + input + input + #objMap #objTime > p:nth-of-type(9), .route-sec .map input:nth-of-type(10):checked + input + #objMap #objTime > p:nth-of-type(10), .route-sec .map input:nth-of-type(11):checked + #objMap #objTime > p:nth-of-type(11) {opacity:0; animation:routeTime 0.3s ease-in-out 0.6s forwards;} .route-sec .map input:nth-of-type(1):checked + input + input + input + input + input + input + input + input + input + input + #objMap #objRoute > div:nth-of-type(1), .route-sec .map input:nth-of-type(2):checked + input + input + input + input + input + input + input + input + input + #objMap #objRoute > div:nth-of-type(2), .route-sec .map input:nth-of-type(3):checked + input + input + input + input + input + input + input + input + #objMap #objRoute > div:nth-of-type(3), .route-sec .map input:nth-of-type(4):checked + input + input + input + input + input + input + input + #objMap #objRoute > div:nth-of-type(4), .route-sec .map input:nth-of-type(5):checked + input + input + input + input + input + input + #objMap #objRoute > div:nth-of-type(5), .route-sec .map input:nth-of-type(6):checked + input + input + input + input + input + #objMap #objRoute > div:nth-of-type(6), .route-sec .map input:nth-of-type(7):checked + input + input + input + input + #objMap #objRoute > div:nth-of-type(7), .route-sec .map input:nth-of-type(8):checked + input + input + input + #objMap #objRoute > div:nth-of-type(8), .route-sec .map input:nth-of-type(9):checked + input + input + #objMap #objRoute > div:nth-of-type(9), .route-sec .map input:nth-of-type(10):checked + input + #objMap #objRoute > div:nth-of-type(10), .route-sec .map input:nth-of-type(11):checked + #objMap #objRoute > div:nth-of-type(11) {display:block; opacity:0; animation:routeShow 2s ease-in-out 0.6s infinite;} .route-sec .map input:nth-of-type(1):checked + input + input + input + input + input + input + input + input + input + input + #objMap #objRoute {width:170%; transform:translate3d(0,0,0);} .route-sec .map input:nth-of-type(2):checked + input + input + input + input + input + input + input + input + input + #objMap #objRoute {width:200%; transform:translate3d(0,-35%,0);} .route-sec .map input:nth-of-type(3):checked + input + input + input + input + input + input + input + input + #objMap #objRoute {width:200%; transform:translate3d(0,-70%,0);} .route-sec .map input:nth-of-type(4):checked + input + input + input + input + input + input + input + #objMap #objRoute {width:200%; transform:translate3d(0,-70%,0);} .route-sec .map input:nth-of-type(5):checked + input + input + input + input + input + input + #objMap #objRoute {width:200%; transform:translate3d(-7%,-70%,0);} .route-sec .map input:nth-of-type(6):checked + input + input + input + input + input + #objMap #objRoute {width:200%; transform:translate3d(-7%,-70%,0);} .route-sec .map input:nth-of-type(7):checked + input + input + input + input + #objMap #objRoute {width:200%; transform:translate3d(-7%,-70%,0);} .route-sec .map input:nth-of-type(8):checked + input + input + input + #objMap #objRoute {width:180%; transform:translate3d(-10%,-64%,0);} .route-sec .map input:nth-of-type(9):checked + input + input + #objMap #objRoute {width:180%; transform:translate3d(-16%,-26%,0);} .route-sec .map input:nth-of-type(9):checked + input + input + #objMap #objNav {top:auto; bottom:5px;} .route-sec .map input:nth-of-type(10):checked + input + #objMap #objRoute {width:165%; transform:translate3d(-16%,-17%,0);} .route-sec .map input:nth-of-type(11):checked + #objMap #objRoute {width:165%; transform:translate3d(-18%,-17%,0);} .route-sec .map #objMap {width:100%; position:relative; overflow:hidden;} .route-sec .map #objRoutes {width:100%; height:clamp(220px, 73.0vw, 730px);border-radius:5px; position:relative; overflow:hidden;} .route-sec .map #objRoute {width:180%; height:100%; position:absolute; top:0; left:0; transform:translate3d(0,-40%,0); transition:all 0.6s ease;} .route-sec .map #objRoute > div {width:100%; height:100%; display:none; opacity:0; z-index:3; position:absolute; top:0; left:0;} .route-sec .map #objRoute > div.bg {display:block; opacity:1; z-index:1;} .route-sec .map #objRoute > div.road {display:block; opacity:1; z-index:2;} .route-sec .map #objRoute > div.point {display:block; opacity:1; z-index:4;} .route-sec .map #objRoute img {width:100%; height:auto;} .route-sec .map #objTime {width:75%; position:absolute; top:5px; left:5px; z-index:15; pointer-events:none;} .route-sec .map #objTime p {width:100%; line-height:1.2; letter-spacing:0; padding:0.4em; background:rgba(255,255,255,0.9); border-radius:5px; box-sizing:border-box; display:flex; flex-wrap:wrap; align-items:center; position:absolute; top:0; left:0; opacity:0;} .route-sec .map #objTime p > span {color:#c00; margin:0 2px 0 5px; padding:0 1em 0 0; display:block; position:relative;} .route-sec .map #objTime p > span:before {content:'▲'; font-size:50%; line-height:1; margin:-0.5em 0 0 0; display:block; position:absolute; top:50%; right:0.4em; transform:rotate(90deg);} .route-sec .map #objTime p > span.all {font-weight:600; margin:0 0 0 1.0em; padding:0; display:block;} .route-sec .map #objTime p > span.all:before {display:none;} .route-sec .map #objTime p > span.all > span {font-size:75%; color:#000;} .route-sec .map #objNav {text-align:left; padding:1px 0.8em; background:rgba(255,255,255,0.7); border:solid 2px #fff; border-radius:5px; box-sizing:border-box; position:absolute; top:5px; right:5px; z-index:15;} .route-sec .map #objNav li {margin:0.5em 0;} .route-sec .map #objNav li label {font-weight:600; line-height:1; letter-spacing:0; color:#000; display:block; box-sizing:border-box; opacity:1; position:relative; cursor:pointer;} .route-sec .map #objNav li label:hover {color:#c00;} .route-sec .map #objNav li.sub label {margin:0 0 0 10px; padding:0 0 0 12px;} .route-sec .map #objNav li.sub label:before {content:'▲'; font-size:50%; line-height:1; margin:-0.5em 0 0 0; display:block; position:absolute; top:50%; left:0; transform:rotate(90deg);} .route-sec .clm1 {text-align:left; margin:1.0em 0 0 0;} .route-sec .txt1 {font-size:var(--fs12); text-align:right; color:#666;} .route-sec .txt2 {font-weight:600; text-align:left; margin:1em 0 0 0;} .route-sec .txt2 + .box-01 {margin-top:0.2em;} .route-sec .txt2 + .box-01 dl {display:flex;} .route-sec .txt2 + .box-01 dt {white-space:nowrap; margin:0 1.0em 0 0;} .route-sec .box-01 ul.note {font-size:80%; margin-top:0;} @keyframes routeTime{ 0%{opacity:0;} 100%{opacity:1;} } @keyframes routeShow{ 0%{opacity:0;} 40%{opacity:1;} 60%{opacity:1;} 100%{opacity:0;} } @media screen and (max-width:767px){ .route-sec .map input:nth-of-type(1):checked + input + input + input + input + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(1), .route-sec .map input:nth-of-type(2):checked + input + input + input + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(2), .route-sec .map input:nth-of-type(3):checked + input + input + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(3), .route-sec .map input:nth-of-type(4):checked + input + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(4), .route-sec .map input:nth-of-type(5):checked + input + input + input + input + input + input + #objMap #objTime > p:nth-of-type(5), .route-sec .map input:nth-of-type(6):checked + input + input + input + input + input + #objMap #objTime > p:nth-of-type(6), .route-sec .map input:nth-of-type(7):checked + input + input + input + input + #objMap #objTime > p:nth-of-type(7), .route-sec .map input:nth-of-type(8):checked + input + input + input + #objMap #objTime > p:nth-of-type(8), .route-sec .map input:nth-of-type(9):checked + input + input + #objMap #objTime > p:nth-of-type(9), .route-sec .map input:nth-of-type(10):checked + input + #objMap #objTime > p:nth-of-type(10), .route-sec .map input:nth-of-type(11):checked + #objMap #objTime > p:nth-of-type(11) {position:static;} .route-sec .map input:nth-of-type(1):checked + input + input + input + input + input + input + input + input + input + input + #objMap #objRoute {width:190%; transform:translate3d(0,-16%,0);} .route-sec .map input:nth-of-type(2):checked + input + input + input + input + input + input + input + input + input + #objMap #objRoute {width:280%; transform:translate3d(0,-78%,0);} .route-sec .map input:nth-of-type(3):checked + input + input + input + input + input + input + input + input + #objMap #objRoute {width:280%; transform:translate3d(0,-126%,0);} .route-sec .map input:nth-of-type(4):checked + input + input + input + input + input + input + input + #objMap #objRoute {width:280%; transform:translate3d(-2%,-136%,0);} .route-sec .map input:nth-of-type(5):checked + input + input + input + input + input + input + #objMap #objRoute {width:280%; transform:translate3d(-7%,-136%,0);} .route-sec .map input:nth-of-type(6):checked + input + input + input + input + input + #objMap #objRoute {width:280%; transform:translate3d(-9%,-136%,0);} .route-sec .map input:nth-of-type(7):checked + input + input + input + input + #objMap #objRoute {width:280%; transform:translate3d(-11%,-137%,0);} .route-sec .map input:nth-of-type(8):checked + input + input + input + #objMap #objRoute {width:180%; transform:translate3d(-1%,-88%,0);} .route-sec .map input:nth-of-type(9):checked + input + input + #objMap #objRoute {width:170%; transform:translate3d(-15%,-32%,0);} .route-sec .map input:nth-of-type(9):checked + input + input + #objMap #objNav {top:auto; bottom:0;} .route-sec .map input:nth-of-type(10):checked + input + #objMap #objRoute {width:170%; transform:translate3d(-16%,-50%,0);} .route-sec .map input:nth-of-type(11):checked + #objMap #objRoute {width:165%; transform:translate3d(-16%,-55%,0);} .route-sec .map #objRoutes {height:60.0vw;} .route-sec .map #objTime {width:100%; margin:0.2em 0 0 0; position:static;} .route-sec .map #objTime p {font-size:80%; position:absolute;} .route-sec .map #objNav {margin:0.2em -0.1em 0 -0.1em; padding:0; background:none; border:none; border-radius:0; display:flex; flex-wrap:wrap; position:static;} .route-sec .map #objNav li {margin:0; padding:0.1em;} .route-sec .map #objNav li label {font-size:90%; padding:0 0.3em; background:rgba(255,255,255,0.7); border:solid 2px #fff; border-radius:5px;} .route-sec .map #objNav li.sub label {margin:0; padding:0 0.3em;} .route-sec .map #objNav li.sub label:before {display:none;} .route-sec .txt1 {font-size:var(--fs10);} .route-sec .txt2 + .box-01 dl {margin-bottom:0.5em; display:block;} .route-sec .txt2 + .box-01 dt {margin:0;} } /* album */ .album-sec .list {margin:30px 0 0 0; display:flex; flex-wrap:wrap; position:relative;} .album-sec .list::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; position:absolute; top:0; left:0; opacity:0.2;} .album-sec .list > div {width:50%; padding:10px 0; position:relative;} .album-sec .list > div::before {content:''; width:100%; height:2px; background:var(--bg-line); display:block; position:absolute; bottom:0; left:0; opacity:0.2;} .album-sec .list a {width:100%; text-decoration:none; display:flex; align-items:center; transition:opacity 0.3s ease;} .album-sec .list a:hover {opacity:0.7;} .album-sec .list .img {padding:0 15px 0 0;} .album-sec .list .img img {width:80px; height:80px; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:5px; display:block; object-fit:cover;} .album-sec .detail .ttl {font-size:var(--fs24); text-align:center;} .album-sec .detail .ctx {text-align:left;} .album-sec .detail .ctx > div {margin:0.5em 0 0 0;} .album-sec .detail .imgs {width:100%;} .album-sec .detail .imgs > div {text-align:center; padding:15px 0 0 0;} .album-sec .detail .imgs img {margin:0 auto; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:10px; display:block;} .album-sec .nav {margin:30px 0 0 0; display:flex; justify-content:space-between; align-items:center;} .album-sec .nav a {min-width:80px; height:40px; font-size:100%; text-align:center; text-decoration:none; color:#fff; margin:0 auto; padding:0 1.8em; background-color:#331a08; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border:none; border-radius:5px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:relative; transition:transform 0.3s ease;} .album-sec .nav a:hover {transform:translate3d(0,-3px,0);} .album-sec .nav .prev a:hover {transform:translate3d(3px,0,0);} .album-sec .nav .next a:hover {transform:translate3d(-3px,0,0);} .album-sec .nav .prev svg, .album-sec .nav .next svg {width:10px; height:10px; margin:-5px 0 0 0; fill:#fff; display:block; position:absolute; top:50%;} .album-sec .nav .prev svg {right:8px;} .album-sec .nav .next svg {left:8px; transform:scale(-1,1);} .calendar-obj .calendar {max-width:500px; width:100%; margin:0 auto; position:relative;} .calendar-obj .date {font-size:var(--fs30); line-height:1; text-align:center; margin:0 0 15px 0;} .calendar-obj .date a {text-decoration:none; color:rgba(51,26,8,1); display:block; transition:opacity 0.3s ease;} .calendar-obj .date a:hover {opacity:0.7;} .calendar-obj .prev, .calendar-obj .next {position:absolute; top:5px;} .calendar-obj .prev {left:5px;} .calendar-obj .next {right:5px;} .calendar-obj .prev a, .calendar-obj .next a {width:30px; height:30px; line-height:1; background:rgba(51,26,8,0.7); border-radius:100%; display:block; position:relative; transition:background 0.3s ease;} .calendar-obj .prev a:hover, .calendar-obj .next a:hover {background:rgba(51,26,8,1);} .calendar-obj .prev svg, .calendar-obj .next svg {width:50%; height:50%; fill:#fff; display:block; position:absolute; top:25%; left:25%;} .calendar-obj .prev svg {transform:scale(-1,1);} .calendar-obj table {width:100%; border-collapse:collapse; border-spacing:0; border:solid 2px rgba(51,26,8,1); empty-cells:show; table-layout:fixed;} .calendar-obj td {font-size:var(--fs18); padding:2px; border:solid 1px rgba(51,26,8,0.3);} .calendar-obj td a, .calendar-obj td span {width:100%; height:3em; line-height:1; text-align:center; text-decoration:none; display:flex; justify-content:center; align-items:center; border-radius:3px;} .calendar-obj td.sun, .calendar-obj td.sun a, .calendar-obj td.sun span {color:#c00;} .calendar-obj td a, .calendar-obj td.sun a {color:#fff; background:rgba(51,26,8,0.7); transition:background 0.3s ease;} .calendar-obj td a:hover, .calendar-obj td.sun a:hover {background:rgba(51,26,8,1);} @media screen and (max-width:767px){ .album-sec .list > div {width:100%; padding:5px 0;} .album-sec .list .img {padding:0 10px 0 0;} .album-sec .list .img img {width:60px; height:50px;} .album-sec .detail .ttl {font-size:var(--fs18);} .album-sec .detail .imgs img {border-radius:5px;} .album-sec .nav {margin:20px 0 0 0;} .album-sec .nav a {min-width:70px;} .calendar-obj .calendar {width:100%;} .calendar-obj .date {font-size:var(--fs20); margin:0 0 10px 0;} .calendar-obj .prev, .calendar-obj .next {top:2px;} .calendar-obj .prev a, .calendar-obj .next a {width:20px; height:20px;} .calendar-obj table {width:100%; border-collapse:collapse; border-spacing:0; border:solid 2px rgba(51,26,8,1); empty-cells:show; table-layout:fixed;} .calendar-obj td {font-size:var(--fs16);} .calendar-obj td a, .calendar-obj td span {height:2em;} } /* works */ .works-sec .ttl {font-size:var(--fs24); font-weight:400; text-align:center;} .works-sec .ttl span {font-size:80%; display:inline-block;} .works-sec .list {margin:0 -5px; display:flex; flex-wrap:wrap;} .works-sec .list > div {width:25%; padding:10px 5px 0 5px; box-sizing:border-box;} .works-sec .list a {font-size:var(--fs14); line-height:1.2; text-align:center; text-decoration:none; display:block; transition:opacity 0.3s ease;} .works-sec .list a:hover {opacity:0.7;} .works-sec .list a > div {margin:0.3em 0 0 0;} .works-sec .list a img {width:100%; height:140px; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:5px; display:block; object-fit:cover;} .works-sec .list + .ttl {margin-top:1.5em;} .works-sec .detail {display:flex; justify-content:space-between;} .works-sec .detail .img {width:50%; margin:30px 0 0 0;} .works-sec .detail .ctx {width:48%; margin:30px 0 0 0;} .works-sec .detail .txt1 {text-align:left; box-sizing:border-box;} .works-sec .detail .txt2 {font-size:var(--fs14); text-align:left; margin:15px 0 0 0; box-sizing:border-box;} .works-sec .detail .sub > div {margin:20px -1px 0 -1px; display:flex; flex-wrap:wrap;} .works-sec .detail .sub label {width:25%; padding:1px; box-sizing:border-box; display:block; cursor:pointer; transition:opacity 0.3s ease;} .works-sec .detail .sub label:hover {opacity:0.7;} .works-sec .detail .sub label img {width:100%; height:100px; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:5px; display:block; object-fit:cover;} .works-sec .detail .imgs input {display:none;} .works-sec .detail .imgs input:checked + img {position:relative; opacity:1; transition:opacity 0.3s ease;} .works-sec .detail .imgs img {width:100%; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border-radius:10px; display:block; position:absolute; opacity:0; pointer-events:none;} .works-sec .detail + .nav {margin:30px 0 0 0; display:flex; justify-content:center; align-items:center;} .works-sec .detail + .nav a {min-width:80px; height:40px; font-size:100%; text-align:center; text-decoration:none; color:#fff; margin:0 auto; padding:0 1.8em; background-color:#331a08; box-shadow:2px 2px 5px rgba(0,0,0,0.2); border:none; border-radius:5px; box-sizing:border-box; display:flex; justify-content:center; align-items:center; position:relative; transition:transform 0.3s ease;} .works-sec .detail + .nav a:hover {transform:translate3d(0,-3px,0);} @media screen and (max-width:767px){ .works-sec .ttl {font-size:var(--fs18);} .works-sec .list {margin:0 -3px;} .works-sec .list > div {width:50%; padding:10px 3px 0 3px;} .works-sec .list a img {max-height:140px; height:37.5vw;} .works-sec .detail {display:block;} .works-sec .detail .img {width:auto; margin:20px 0 0 0;} .works-sec .detail .ctx {width:auto; margin:5px 0 0 0; display:flex; flex-wrap:wrap; flex-direction:column;} .works-sec .detail .txt1 {width:100%; margin:15px 0 0 0; order:2;} .works-sec .detail .txt2 {width:100%; margin:10px 0 0 0; padding:0.4em 0.8em; order:3;} .works-sec .detail .sub {margin:-2px -2px 0 -2px; order:1;} .works-sec .detail .sub > div {width:100%; margin:0; display:flex; flex-wrap:wrap;} .works-sec .detail .sub label {width:25%; padding:1px 2px;} .works-sec .detail .sub label img {height:60px; border-radius:5px;} .works-sec .detail .imgs img {border-radius:5px;} .works-sec .detail + .nav {margin:20px 0 0 0;} .works-sec .detail + .nav a {min-width:70px;} } /* form */ #loading-layer {width:100%; height:100%; background-color:rgba(51,26,8,0.7); display:flex; justify-content:center; align-items:center; position:fixed; top:0; left:0; opacity:0; pointer-events:none; z-index:9999; transition:opacity 0.3s ease;} #loading-layer .spinner {width:60px; height:60px; margin:0 auto; border-width:5px; border-style:solid; border-color:rgba(255,255,255,1) rgba(255,255,255,0.2) rgba(255,255,255,0.2) rgba(255,255,255,0.2); border-image:initial; border-radius:50%;} body.loading #loading-layer {opacity:1; pointer-events:auto;} body.loading #loading-layer .spinner {animation:loading 1s ease-in-out 0s infinite normal none;} @keyframes loading { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } .form-sec .form {max-width:740px; margin:0 auto; display:block;} .form-sec input[type="text"], .form-sec input[type="email"], .form-sec textarea {width:100%; font-size:var(--fs18); line-height:1.2; letter-spacing:0; padding:0.5em; border:1px solid #999; border-radius:5px; box-sizing:border-box; display:block; outline:none; box-shadow:none;} .form-sec textarea {height:180px; line-height:1.4; resize:none;} .form-sec input[type="text"].error, .form-sec input[type="email"].error, .form-sec textarea.error {background-color:#eee;} .form-sec .labels label {font-size:var(--fs18); line-height:1.2; margin:0.5em 0 0 0; display:flex; cursor:pointer;} .form-sec .labels label span {padding:0 0 0 0.4em; display:block;} .form-sec .btns {margin:1.0em -0.5em 0 -0.5em; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;} .form-sec .btns > div {font-size:var(--fs18); padding:0.5em 0.5em 0 0.5em;} .form-sec .txt1 {padding:0 0 1.5em 0;} .form-sec .txt1 strong {font-weight:900; color:#c00;} .form-sec .txt2 {font-size:var(--fs18); text-align:left; padding:10px 0; display:flex;} .form-sec .txt2 dt {width:8em; padding:0.3em 0;} .form-sec .txt2 dd {padding:0; flex:1;} .form-sec .txt2.conf dd {padding:0.3em 0;} .form-sec .txt3 {text-align:center;padding:0 0 1.5em 0;} .form-sec .txt3 span {font-size:150%; display:block;} .form-sec .err-txt {text-align:left; color:#c00;} .form-sec .hp-field {width:1px; height:1px; position:absolute; top:auto; left:-10000px; overflow:hidden;} @media screen and (max-width:767px){ .form-sec input[type="text"], .form-sec textarea {font-size:var(--fs16);} .form-sec textarea {height:120px;} .form-sec .labels label {font-size:var(--fs16);} .form-sec .btns {margin:1.0em -0.2em 0 -0.2em;} .form-sec .btns > div {font-size:var(--fs16); padding:0.5em 0.2em 0 0.2em;} .form-sec .txt2 {font-size:var(--fs16); display:block;} .form-sec .txt2 dt {width:auto; font-size:var(--fs14); font-weight:900; padding:0;} .form-sec .txt2 dt::before {content:'[';} .form-sec .txt2 dt::after {content:']';} }