/* Theme Name: ING Theme Theme URI: Author: the WordPress team Author URI: Description: Version: 1.0 Tags: */ /* -------------------------------------------------- reset -------------------------------------------------- */ *, ::before, ::after { box-sizing: border-box;} html { line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;} body { margin: 0;} main { display: block;} p, table, blockquote, address, pre, iframe, form, figure, dl { margin: 0;} h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0;} ul, ol { margin: 0; padding: 0; list-style: none;} dd { margin-left: 0;} hr { box-sizing: content-box; height: 0; overflow: visible; border-top-width: 1px; margin: 0; clear: both; color: inherit;} pre { font-family: monospace, monospace; font-size: inherit;} address { font-style: inherit;} a { background-color: transparent; text-decoration: none; color: inherit;} abbr[title] { text-decoration: underline dotted;} code, kbd, samp { font-family: monospace, monospace; font-size: inherit;} small { font-size: 80%;} sub, sup { line-height: 0; position: relative; vertical-align: baseline;} svg, img, embed, object, iframe { vertical-align: bottom;} /* Forms */ /* ============================================ */ button, input, optgroup, select, textarea { background: transparent; padding: 0; margin: 0; border-radius: 0; color: inherit; font: inherit; text-align: inherit; text-transform: inherit; vertical-align: middle; } button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer;} button:disabled, [type="button"]:disabled, [type="reset"]:disabled, [type="submit"]:disabled { cursor: default;} :-moz-focusring { outline: auto;} select:disabled { opacity: inherit;} option { padding: 0;} fieldset { margin: 0; padding: 0; min-width: 0;} legend { padding: 0;} progress { vertical-align: baseline;} textarea { overflow: auto;} [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto;} [type="search"] { outline-offset: -2px;} [type="search"]::-webkit-search-decoration { -webkit-appearance: none;} ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit;} [type="number"] { -moz-appearance: textfield;} label[for] { cursor: pointer;} details { display: block;} summary { display: list-item;} [contenteditable]:focus { outline: auto;} table { border-color: inherit; border-collapse: collapse;} td, th { vertical-align: top; padding: 0;} /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0;} .slick-list:focus { outline: none;} .slick-list.dragging{ cursor: pointer; cursor: hand;} .slick-slider .slick-track, .slick-slider .slick-list{ -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; top: 0; left: 0; display: block;} .slick-track:before, .slick-track:after { display: table; content: '';} .slick-track:after { clear: both;} .slick-loading .slick-track { visibility: hidden;} .slick-slide { display: none; float: left; height: 100%; min-height: 1px;} [dir='rtl'] .slick-slide { float: right;} .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none;} .slick-slide.dragging img { pointer-events: none;} .slick-initialized .slick-slide { display: block; outline: none;} .slick-loading .slick-slide { visibility: hidden;} .slick-vertical .slick-slide{ display: block; height: auto;} .slick-arrow.slick-hidden { display: none;} /** Dots */ .slick-dotted.slick-slider{} .slick-dots { position: absolute; display: block; width: 100%; padding: 0; margin: 0; text-align: center;} .slick-dots li { position: relative; display: inline-block; width: 60px; height: 20px; margin: 0px; padding: 0px; cursor: pointer;} .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; margin: 0 auto; cursor: pointer; color: transparent; border: 0; outline: none; } @media (max-width: 481px) { .slick-arrow{ width: 32px; height: 32px;} .slick-arrow:before{ width: 12px; height: 12px; border-width: 1px;} .slick-dots li { width: 30px; height: 12px;} } html{ height: -webkit-fill-available; } body{ min-height: 100vh; min-height: -webkit-fill-available; } /* font-style -------------------------------------------------- */ body { width: 100%; color: #191919; font-family: "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif; font-size: 16px; *font-size:small; *font:x-small; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body.fixed { position: fixed;} input, textarea {font-family: "Noto Sans JP","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;} .min { font-family: "Shippori Mincho", "Hiragino Mincho ProN","ヒラギノ明朝 Pro", "游明朝", "Yu Mincho", "YuMincho", serif;} .eng { font-family: "Jost", sans-serif;} ::selection{ background: #feffaf; color: #000;} ::-moz-selection{ background: #feffaf; color: #000;} a { color: #191919; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px;} a:link { color: #191919;} a:visited{ color: #191919;} a:hover { color: #191919;} a:active { color: #191919;} em{ font-style: normal;} /* utility -------------------------------------------------- */ .cf{ clear: both;} .cf:after{ content: ''; display: block; clear: both;} @media (max-width: 641px) { } @media (max-width: 481px) { } #aside-contact ul li label.error { position: absolute; top: -30px; left: -10px; padding: 5px 8px; background: #d00; border-radius: 5px; color: #fff; font-size: 12px; opacity: 0; animation: .5s showError linear forwards .2s; } #aside-contact ul li label.error:before{ content: ''; display: block; width: 8px; height: 8px; background: #d00; transform: rotate(45deg); position: absolute; bottom: -4px; left: 20px; } @keyframes showError{ 100%{ opacity: 1;} } #hd { position: absolute; left: 0; top: 0; width: 100%;} #hd .inner-hd { width: 92%; margin: 0 auto; padding: 20px 0;} #hd .hd-logo { width: 50%; max-width: 440px;} #hd .hd-logo h1 {} #hd .hd-logo h1 a { display: block; width: 100%;} #hd .hd-logo h1 a img { width: 100%;} #menu-btn { position: fixed; right: 40px; top: 20px; width: 60px; height: 40px; z-index: 101;} #menu-btn div { position: relative; width: 100%; height: 100%; cursor: pointer;} #menu-btn div span { display: block; width: 100%; height: 2px; background: #373737; position: absolute; left: 50%; transform: translate(-50%,0); } #menu-btn div span:nth-child(1) { top: 14px;} #menu-btn div span:nth-child(2) { top: 25px;} #menu-btn.active div span:nth-child(1) { animation: bar-1 0.3s ease forwards;} #menu-btn.active div span:nth-child(2) { animation: bar-2 0.3s ease forwards;} #menu-btn.wh div span { background: #fff;} @keyframes bar-1{ 0% { transform: translate(-50%,0);} 50% { transform: translate(-50%,5px) rotate(0deg);} 80% { transform: translate(-50%,5px) rotate(0deg);} 100%{ height: 1px; transform: translate(-50%,5px) rotate(20deg); background: #373737;} } @keyframes bar-2{ 0% { transform: translate(-50%,0);} 50% { transform: translate(-50%,-6px) rotate(0deg);} 80% { transform: translate(-50%,-6px) rotate(0deg);} 100%{ height: 1px; transform: translate(-50%,-6px) rotate(-20deg); background: #373737;} } @media (max-width: 481px) { #menu-btn { right: 20px; top: 12px; width: 40px; height: 30px;} #menu-btn div span:nth-child(1) { top: 10px;} #menu-btn div span:nth-child(2) { top: 18px;} #menu-btn.active div span:nth-child(1) { animation: bar-1sp 0.3s ease forwards; background: #373737;} #menu-btn.active div span:nth-child(2) { animation: bar-2sp 0.3s ease forwards; background: #373737;} } @keyframes bar-1sp{ 0% { transform: translate(-50%,0);} 50% { transform: translate(-50%,4px) rotate(0deg);} 80% { transform: translate(-50%,4px) rotate(0deg);} 100%{ height: 1px; transform: translate(-50%,4px) rotate(20deg);} } @keyframes bar-2sp{ 0% { transform: translate(-50%,0);} 50% { transform: translate(-50%,-4px) rotate(0deg);} 80% { transform: translate(-50%,-4px) rotate(0deg);} 100%{ height: 1px; transform: translate(-50%,-4px) rotate(-20deg);} } #sp-nav { position: fixed; left: 0; top: 0; width: 100%; height: 100lvh; z-index: -1; visibility: none; transition: 0.4s linear; opacity: 0; } #sp-nav.open { opacity: 1; visibility: visible; z-index: 100;} #sp-nav .inner { width: 100%; height: 100%; background: #fff;} #sp-nav .scrollArea { width: 100%; height: 100%; padding: 30px; overflow-y: scroll;} #sp-nav .ctn { display: flex; justify-content: space-between; flex-direction: row-reverse; width: 100%; max-width: 1200px; margin: 0 auto; padding-bottom: 100px;} #sp-nav .links{ width: 72%; max-width: 760px;} #sp-nav .txt { width: 25%; padding-top: 20px;} #sp-nav .txt h3 { margin-bottom: 30px;} #sp-nav .txt h3 a { display: block; width: 80%; max-width: 250px;} #sp-nav .txt h3 a img { width: 100%;} #sp-nav .txt ul { width: 100%; max-width: 300px; margin-bottom: 40px; font-size: 0;} #sp-nav .txt ul li { display: inline-block; width: 60px;} #sp-nav .txt ul li a { display: block; width: 72%; max-width: 50px;} #sp-nav .txt p { font-size: 14px;} #sp-nav .txt p span { display: block;} #sp-nav .links .col-1, #sp-nav .links .col-2 { display: inline-block; vertical-align: top;} #sp-nav .links .col-1 { width: 45%;} #sp-nav .links .col-2 { width: 54%;} #sp-nav .links ul { } #sp-nav .links ul li { padding: 20px 0; line-height: 1.2; font-size: 16px;} #sp-nav .links ul li a { text-decoration: none;} #sp-nav .links ul li a span { display: inline-block; color: #00a9a4; vertical-align: baseline;} #sp-nav .links ul li a span.eng { margin-right: 15px; font-size: 48px; font-weight: 600;} #sp-nav .links ul li a span.jp {} #sp-nav .links ul li span.top span { display: inline-block; color: #00a9a4; vertical-align: baseline;} #sp-nav .links ul li span.top span.eng { margin-right: 15px; font-size: 42px; font-weight: 600;} #sp-nav .links ul li ul { padding-left: 10px;} #sp-nav .links ul li ul li { position: relative; padding: 8px 0; padding-left: 35px; font-size: 18px;} #sp-nav .links ul li ul li:after { content: ''; display: block; width: 18px; height: 1px; background: #006e78; position: absolute; left: 0; top: 50%; } #sp-nav .links ul li a:hover span { color: #333;} #sp-nav .links ul li ul li a:hover { text-decoration: underline; text-decoration-color: #00b4a5; text-underline-offset: 4px; text-decoration-thickness: 1px;} #sp-nav aside { padding: 20px 0; border-top: solid 1px #969696;} #sp-nav aside ul { margin-bottom: -20px;} #sp-nav aside ul li { display: inline-block; margin-right: 30px; font-size: 14px;} #sp-nav aside ul li:last-child { margin-right: 0px;} #sp-nav aside p { font-size: 14px; line-height: 1.2; text-align: right;} @media (max-width: 1281px) { #sp-nav .links ul li { padding: 15px 0; font-size: 14px;} #sp-nav .links ul li span.top span.eng, #sp-nav .links ul li a span.eng { margin-right: 12px; font-size: 36px;} #sp-nav .links ul li ul li { padding: 8px 0; padding-left: 35px; font-size: 16px;} } @media (max-width: 1001px) { #sp-nav .links ul li { padding: 10px 0; font-size: 13px;} #sp-nav .links ul li a span.eng { font-size: 30px;} #sp-nav .links ul li ul li { font-size: 14px;} #sp-nav .txt ul li { width: 60px;} #sp-nav .txt p { font-size: 12px;} } @media (max-width: 801px) { #sp-nav .scrollArea { padding: 30px;} #sp-nav .ctn { display: block; padding-bottom: 80px;} #sp-nav .links{ width: 100%; margin-bottom: 80px;} #sp-nav .txt { width: 100%; padding-top: 0px; text-align: center;} #sp-nav .txt h3 a { width: 45%; margin: 0 auto;} #sp-nav .txt ul { margin: 0 auto 40px; text-align: center;} #sp-nav aside ul li { margin-right: 20px;} } @media (max-width: 481px) { #sp-nav .ctn { padding-bottom: 40px;} #sp-nav .links{ margin-bottom: 60px;} #sp-nav .links .col-1, #sp-nav .links .col-2 { display: block;} #sp-nav .links .col-1 { width: 100%;} #sp-nav .links .col-2 { width: 100%;} #sp-nav .links ul li { padding: 6px 0;} #sp-nav .links ul li ul { padding-left: 6px;} #sp-nav .links ul li ul li { padding: 8px 0; padding-left: 25px; font-size: 13px;} #sp-nav .links ul li ul li:after { width: 15px; height: 1px;} #sp-nav .txt ul li { width: 50px;} #sp-nav .txt ul li a { margin: 0 auto;} #sp-nav aside ul { margin: 0 auto 20px; text-align: center;} #sp-nav aside ul li { font-size: 12px;} #sp-nav aside p { font-size: 10px;} } #ft { background: #efefef;} #ft .inner-ft { width: 92%; max-width: 1200px; margin: 0 auto; padding: 120px 0;} #ft .ft-ctn { display: flex; justify-content: space-between; align-items: flex-end; width: 100%;} #ft .ft-logo{ width: 32%;} #ft .ft-txt { width: 65%;} #ft .ft-logo h3 {} #ft .ft-logo h3 a { display: block; width: 100%; max-width: 300px;} #ft .ft-logo h3 img { width: 100%;} #ft .ft-txt ul { margin-bottom: 40px; font-size: 0; text-align: right;} #ft .ft-txt ul li { display: inline-block; width: 30%; max-width: 80px;} #ft .ft-txt ul li a { display: inline-block; width: 50px;} #ft .ft-txt ul li a img { width: 100%;} #ft .ft-txt ul li a:hover img { opacity: 0.8;} #ft .ft-txt p.txt { margin-bottom: 20px; font-size: clamp(14px,1.8vw,18px); text-align: right;} #ft .ft-txt p.txt span { display: inline-block; margin-right: 20px;} #ft .ft-txt .copyright { } #ft .ft-txt .copyright p { font-size: 14px; text-align: right;} @media (max-width: 801px) { #ft .inner-ft { padding: 120px 0;} #ft .ft-txt p.txt span { display: block; margin-right: 0px;} #ft .ft-txt ul li { max-width: 80px;} #ft .ft-txt ul li a { width: 60px;} #ft .ft-txt .copyright p { font-size: 14px;} } @media (max-width: 641px) { #ft .ft-ctn { display: block;} #ft .ft-logo{ width: 45%; margin: 0 auto 60px;} #ft .ft-txt { width: 100%;} #ft .ft-txt ul { margin-bottom: 80px; text-align: center;} #ft .ft-txt p.txt { margin-bottom: 30px; font-size: 14px; text-align: center;} #ft .ft-txt p.txt span { margin: 0 auto 6px; font-weight: 700;} #ft .ft-txt .copyright p { font-size: 12px; text-align: center;} } @media (max-width: 481px) { #ft .inner-ft { padding: 60px 0;} #ft .ft-logo{ margin-bottom: 30px;} #ft .ft-txt ul { margin-bottom: 40px;} #ft .ft-txt ul li { max-width: 50px;} #ft .ft-txt ul li a { width: 36px;} #ft .ft-txt p.txt { margin-bottom: 20px; font-size: 12px;} #ft .ft-txt .copyright p { font-size: 10px;} } #about {} #about .inner-sct { padding: 120px 0px;} #about .ttl { margin-bottom: 40px;} #about .ctn { display: flex; width: 94%; max-width: 1180px; margin: 0 auto; justify-content: space-between; flex-wrap: wrap;} #about .box.box-1, #about .box.box-6 { width: 48%; padding: 5px;} #about .box.box-2, #about .box.box-3, #about .box.box-4, #about .box.box-5 { width: 26%; padding: 5px;} #about .box a { position: relative; display: block; width: 100%; padding-top: 420px; border-radius: 6px; overflow: hidden; text-decoration: none;} #about .box a:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; transition: 0.3s ease; } #about .box.box-1 a:after { background: url('/img/common/about-1.jpg') no-repeat 50% 50% / cover;} #about .box.box-2 a:after { background: url('/img/common/about-2.jpg') no-repeat 50% 50% / cover;} #about .box.box-3 a:after { background: url('/img/common/about-3.jpg') no-repeat 50% 50% / cover;} #about .box.box-4 a:after { background: url('/img/common/about-4.jpg') no-repeat 50% 50% / cover;} #about .box.box-5 a:after { background: url('/img/common/about-5.jpg') no-repeat 50% 50% / cover;} #about .box.box-6 a:after { background: url('/img/common/about-6.jpg') no-repeat 50% 50% / cover;} #about .box a dl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); transition: 0.3s ease; z-index: 2;} #about .box a dl dt { padding: 20px; color: #fff; font-size: clamp(14px, 1.8vw, 18px); line-height: 1;} #about .box a dl dt span { display: block; padding: 5px;} #about .box a dl dt span.eng { font-size: clamp(24px, 4.2vw, 42px); letter-spacing: 0.15rem;} #about .box a dl dt span.min { padding-top: 12px; letter-spacing: 0.1rem;} #about .box a dl dd.txt { position: absolute; left: 0; bottom: 0; width: 100%; padding: 20px 25px; padding-right: 60px; color: #fff; font-size: clamp(15px, 1.8vw, 18px); } #about .box a dl dd.youtube { position: absolute; left: 0; bottom: 0; width: 100%; padding: 25px 0; text-align: center;} #about .box a dl dd.youtube img { width: 30%; max-width: 200px;} #about .box a dl dd.arw { position: absolute; right: 0; bottom: 0; padding: 16px; font-size: 0; text-align: right;} #about .box a dl dd.arw img { width: 36px;} #about .box a:hover:after { transform: translate(-50%,-50%) scale(1.06);} #about .box a:hover dl { background: rgba(0,0,0,0.3);} @media (max-width: 1281px) { #about .box a { padding-top: 380px;} #about .box a dl dd.txt { font-size: clamp(14px, 1.6vw, 16px);} } @media (max-width: 1001px) { #about .box.box-1 , #about .box.box-6 { width: 100%;} #about .box.box-2, #about .box.box-3, #about .box.box-4, #about .box.box-5 { width: 50%;} } @media (max-width: 801px) { #about .inner-sct { padding: 80px 0px;} #about .ttl { margin-bottom: 40px;} #about .box a dl dt { padding: 10px; font-size: 14px;} #about .box a dl dt span.eng { font-size: 4.0vw; letter-spacing: 0.1rem;} #about .box a dl dd.txt { padding: 10px 15px; font-size: 3.0vw;} #about .box a dl dd.youtube { padding: 15px 0;} #about .box a dl dd.arw { padding: 12px;} #about .box a dl dd.arw img { width: 32px;} } @media (max-width: 641px) { #about .box.box-1, #about .box.box-2, #about .box.box-3, #about .box.box-4, #about .box.box-5, #about .box.box-6 { padding: 4px;} #about .box a { padding-top: 240px;} #about .box.box-1 a { padding-top: 100%;} } @media (max-width: 481px) { #about .inner-sct { padding: 40px 0px;} #about .ttl { margin-bottom: 20px;} #about .box a { padding-top: 180px;} #about .box a dl dt { padding: 8px; font-size: 12px;} #about .box a dl dt span.eng { padding: 0 5px;} #about .box a dl dt span.eng { font-size: 18px;} #about .box a dl dd.arw { padding: 9px;} #about .box a dl dd.arw img { width: 20px;} } #aside-contact { background: #373737;} #aside-contact .inner-sct { padding: 120px 0;} #aside-contact .ttl { margin-bottom: 80px;} #aside-contact .ttl h2 span.jp { color: #fff;} #aside-contact .ctn { width: 92%; max-width: 1180px; margin: 0 auto;} #aside-contact .txt { margin-bottom: 10px; padding: 60px 0 50px; border: solid 1px #fff;} #aside-contact .txt p { color: #fff; font-size: clamp(18px,2.4vw,24px); letter-spacing: 0.15rem; text-align: center;} #aside-contact .txt p.tel { margin-top: 60px;} #aside-contact .txt p.tel img { display: block; width: 65%; max-width: 540px; margin: 0 auto 30px;} #aside-contact .txt p.tel span{ display: block; font-size: 20px;} #aside-contact .flex { display: flex; justify-content: space-between;} #aside-contact .box { width: calc(25% - 10px);} #aside-contact .box dl { position: relative; width: 100%; padding-top: 100%; background: #efefef;} #aside-contact .box dl dt { position: absolute; top: 0px; left: 0px; padding: 20px; font-size: 40px; line-height: 1;} #aside-contact .box dl dd { position: absolute; left: 0; width: 100%; text-align: center;} #aside-contact .box dl dd.icn { top: 50%; transform: translateY(-58%);} #aside-contact .box dl dd.icn img { width: 30%; max-width: 136px;} #aside-contact .box dl dd.icn span{ display: block; padding-top: 12px; font-size: clamp(12px,1.12vw,16px); font-weight: 600; letter-spacing: 0.15rem; line-height: 1.4; text-align: center;} #aside-contact .box dl dd.link { bottom: 24px;} #aside-contact .box dl dd.link a { position: relative; display: block; width: 86%; max-width: 320px; background: #fff; margin: 0 auto; border: solid 1px #373737; color: #373737; font-size: clamp(13px,1.4vw,16px); line-height: 1; text-decoration: none; } #aside-contact .box dl dd.link a:after { content: ''; display: block; width: 10px; height: 10px; border-top: solid 1px #191919; border-right: solid 1px #191919; position: absolute; right: 5%; top: 50%; transform: translateY(-50%) rotate(45deg); } #aside-contact .box dl dd.link a span { display: block; padding: 9px 0 12px; padding-right: 12px;} #aside-contact .box dl dd.link a:hover { border-color: #00b4a5; color: #00b4a5;} #aside-contact .box dl dd.link a:hover:after { border-color: #00b4a5;} @media (max-width: 1281px) { #aside-contact .box dl dt { padding: 12px; font-size: 30px;} #aside-contact .box dl dd.link { bottom: 16px;} #aside-contact .box dl dd.link a span { padding: 6px 0 8px; padding-right: 8px;} } @media (max-width: 801px) { #aside-contact .inner-sct { padding: 100px 0;} #aside-contact .ttl { margin-bottom: 40px;} #aside-contact .txt { padding: 40px 0 30px;} #aside-contact .txt p.tel { margin-top: 40px;} #aside-contact .txt p.tel img { margin-bottom: 20px;} #aside-contact .txt p.tel span{ font-size: 12px;} #aside-contact .flex { flex-wrap: wrap; grid-gap: 16px;} #aside-contact .box { width: calc(50% - 8px);} } @media (max-width: 481px) { #aside-contact .inner-sct { padding: 40px 0;} #aside-contact .ttl { margin-bottom: 20px;} #aside-contact .txt { padding: 20px 0px;} #aside-contact .txt p { font-size: 12px; letter-spacing: 0.05rem;} #aside-contact .txt p.tel { margin-top: 12px;} #aside-contact .txt p.tel img { margin-bottom: 6px;} #aside-contact .txt p.tel span{ font-size: 10px;} #aside-contact .flex { grid-gap: 6px;} #aside-contact .box { width: calc(50% - 3px);} #aside-contact .box dl dt { padding: 8px; font-size: 16px;} #aside-contact .box dl dd.icn { transform: translateY(-65%);} #aside-contact .box dl dd.icn span{ padding-top: 6px; font-size: 10px; letter-spacing: 0.05rem;} #aside-contact .box dl dd.link { bottom: 12px;} #aside-contact .box dl dd.link a { font-size: 10px;} #aside-contact .box dl dd.link a:after { width: 7px; height: 7px;} #aside-contact .box dl dd.link a span { padding: 6px 0;} } #aside-show { background: #efefef;} #aside-show .inner-sct { padding: 120px 0 50px;} #aside-show .ttl { margin-bottom: 60px;} #aside-show .ctn { width: 92%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;} #aside-show .box { width: 48.5%; padding: 10px 0;} #aside-show .box figure { position: relative; display: block; margin-bottom: 40px; padding-top: 55%; overflow: hidden;} #aside-show .box figure img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%;} #aside-show .box .flex { display: flex; justify-content: space-between; align-items: center;} #aside-show .box .txt { width: 60%;} #aside-show .box .links{ width: 38%;} #aside-show .box .txt p { line-height: 1.4;} #aside-show .box .txt p.name { margin-bottom: 12px; font-size: clamp(16px,2.0vw,24px); font-weight: 600;} #aside-show .box .txt p.addr { margin-bottom: 20px; font-size: clamp(16px,1.5vw,18px);} #aside-show .box .txt p.tel { margin-bottom: 20px; font-size: clamp(21px,2.8vw,32px);} #aside-show .box .txt p.tel i { display: inline-block; width: 50px; height: 34px; margin-right: 12px; vertical-align: middle;} #aside-show .box .txt p.tel i.icn-free{ background: url('/img/common/icn-free.svg') no-repeat 50% 100% / 100% auto;} #aside-show .box .txt p.tel i.icn-tel { background: url('/img/common/icn-tel.svg') no-repeat 50% 100% / 100% auto;} #aside-show .box .txt p.tel a { display: inline-block; vertical-align: middle; color: #191919; text-decoration: none; pointer-events: none;} #aside-show .box .txt p.time { font-size: clamp(12px,1.2vw,16px);} #aside-show .box .links .link a { position: relative; display: block; border: solid 1px #191919; color: #191919; font-size: clamp(12px,1.2vw,16px); line-height: 1; text-align: center; text-decoration: none; } #aside-show .box .links .link a:after { content: ''; display: block; width: 10px; height: 10px; border-top: solid 2px #191919; border-right: solid 2px #191919; position: absolute; right: 15px; top: 50%; transform: translateY(-50%) rotate(45deg); } #aside-show .box .links .link a span { display: block; padding: 15px 0; padding-right: 10px;} #aside-show .box .links .link a:hover { color: #00b4a5;} #aside-show .box .links .link a:hover:after { border-color: #00b4a5;} @media (max-width: 1281px) { #aside-show .box .links .link a:after { right: 10px;} #aside-show .box .links .link a span { padding: 12px 0; padding-right: 10px;} } @media (max-width: 1001px) { } @media (max-width: 801px) { #aside-show .inner-sct { padding: 60px 0 40px;} #aside-show .ttl { margin-bottom: 30px;} #aside-show .ctn { display: block;} #aside-show .box { display: flex; justify-content: space-between; width: 100%; padding: 15px 0;} #aside-show .box figure { width: 50%; padding-top: 0%; margin-bottom: 0px;} #aside-show .box figure img { position: relative; top: auto; transform: translateY(0%);} #aside-show .box .flex { display: block; width: 50%;} #aside-show .box .txt { width: 100%; padding-left: 30px;} #aside-show .box .txt p.name { margin-bottom: 8px; font-size: 21px;} #aside-show .box .txt p.addr { margin-bottom: 5px; font-size: 14px;} #aside-show .box .txt p.tel { margin-bottom: 5px; font-size: 24px;} #aside-show .box .txt p.tel i { width: 40px; height: 27px; margin-right: 8px;} #aside-show .box .txt p.time { font-size: 12px;} #aside-show .box .links{ width: 100%; padding: 20px 30px 0;} } @media (max-width: 481px) { #aside-show .inner-sct { padding: 40px 0 20px;} #aside-show .ttl { margin-bottom: 12px;} #aside-show .box figure { width: 45%;} #aside-show .box .flex { width: 55%;} #aside-show .box .txt { width: 100%; padding-left: 12px;} #aside-show .box .txt p.name { margin-bottom: 4px; font-size: 15px;} #aside-show .box .txt p.addr { margin-bottom: 0px; font-size: 11px;} #aside-show .box .txt p.tel { margin-bottom: 4px; font-size: 20px;} #aside-show .box .txt p.tel i { width: 24px; height: 16px; margin-right: 5px;} #aside-show .box .txt p.time { font-size: 9px;} #aside-show .box .links{ padding: 12px 12px 0;} #aside-show .box .links .link a { font-size: 12px;} #aside-show .box .links .link a:after { width: 7px; height: 7px; border-width: 1px;} #aside-show .box .links .link a span { padding: 6px 0; padding-right: 10px;} } #error-404 .inner-sct { padding: 150px 0 120px;} #error-404 .ctn h2 { margin-bottom: 50px; font-size: 36px; line-height: 1.2; text-align: center;} #error-404 .ctn h2 span { display: block; font-size: 120px; letter-spacing: 0.1rem;} #error-404 .ctn p { margin-bottom: 60px; font-size: 18px; letter-spacing: 0.1rem; text-align: center;} #error-404 .ctn .btn { width: 45%; max-width: 400px; margin: 0 auto;} #error-404 .ctn .btn a { display: block; border: solid 1px #373737; color: #373737; font-size: clamp(15px,1.8vw,21px); letter-spacing: 0.15rem; line-height: 1.4; text-align: center; text-decoration: none; transition: 0.3s ease; } #error-404 .ctn .btn a span { display: block; padding: 15px 0;} #error-404 .ctn .btn a:hover{ background: #373737; color: #fff;} @media (max-width: 801px) { #error-404 .ctn .btn a span { padding: 12px 0;} } @media (max-width: 481px) { #error-404 .inner-sct { padding: 80px 0px;} #error-404 .ctn h2 span { line-height: 1.0;} #error-404 .ctn p { font-size: 12px; letter-spacing: 0.05rem;} #error-404 .ctn .btn a { font-size: 13px; letter-spacing: 0.05rem;} #error-404 .ctn .btn a span { padding: 6px 0;} }