@charset "utf-8"; /*-------------------------------------- copyright : yuyu design. -----------------------------------*/ /* common ==============================*/ /* Google Fonts は index.php の で preconnect + link タグとして読み込む */ /* html ----------*/ html { font-size: 62.5%; } @media screen and (max-width:720px) { html { font-size: 56.3%; } } @media screen and (max-width:560px) { html { font-size: 50%; } } /* body ----------*/ body { font-family: "Noto Sans JP", sans-serif; /* font-family: "Helvetica", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif; */ /* font-family: "Hiragino Mincho ProN", serif; */ font-size: 1.6rem; line-height: 1.2; color: #333; font-weight: 400; /* font-feature-settings:"palt"; */ } /* img ----------*/ img, svg { max-width: 100%; image-rendering: -webkit-optimize-contrast; image-rendering: auto; } /* a ----------*/ a:link, a:visited { transition: all 0.3s ease-out; } /*a:link, a:visited { transition: color, opacity 0.3s ease-out; }*/ a:hover, a:active { opacity: 0.6; } a:focus:not(:focus-visible), *:focus:not(:focus-visible) { outline: none; } :focus-visible { outline: 2px solid #46C69D; outline-offset: 3px; border-radius: 2px; } /* margin ----------*/ .mt1px{margin-top:1px!important}.mt2px{margin-top:2px!important}.mt3px{margin-top:3px!important}.mt4px{margin-top:4px!important}.mt5px{margin-top:5px!important}.mt10px{margin-top:10px!important}.mt15px{margin-top:15px!important}.mt20px{margin-top:20px!important}.mt25px{margin-top:25px!important}.mt30px{margin-top:30px!important}.mt35px{margin-top:35px!important}.mt40px{margin-top:40px!important}.mt45px{margin-top:45px!important}.mt50px{margin-top:50px!important}.mt60px{margin-top:60px!important}.mt70px{margin-top:70px!important}.mt80px{margin-top:80px!important}.mt90px{margin-top:90px!important}.mt100px{margin-top:100px!important}.mt110px{margin-top:110px!important}.mt120px{margin-top:120px!important}.mt1pr{margin-top:1%!important}.mt2pr{margin-top:2%!important}.mt3pr{margin-top:3%!important}.mt4pr{margin-top:4%!important}.mt5pr{margin-top:5%!important}.mt6pr{margin-top:6%!important}.mt7pr{margin-top:7%!important}.mt8pr{margin-top:8%!important}.mt9pr{margin-top:9%!important}.mt10pr{margin-top:10%!important}.mt11pr{margin-top:11%!important}.mt12pr{margin-top:12%!important}.mt13pr{margin-top:13%!important}.mt14pr{margin-top:14%!important}.mt15pr{margin-top:15%!important}.mt16pr{margin-top:16%!important}.mt17pr{margin-top:17%!important}.mt18pr{margin-top:18%!important}.mt19pr{margin-top:19%!important}.mt20pr{margin-top:20%!important}.mt1rem{margin-top:1rem!important}.mt2rem{margin-top:2rem!important}.mt3rem{margin-top:3rem!important}.mt4rem{margin-top:4rem!important}.mt5rem{margin-top:5rem!important}.mt6rem{margin-top:6rem!important}.mt7rem{margin-top:7rem!important}.mt8rem{margin-top:8rem!important}.mt9rem{margin-top:9rem!important}.mt10rem{margin-top:10rem!important}.mb1px{margin-bottom:1px!important}.mb2px{margin-bottom:2px!important}.mb3px{margin-bottom:3px!important}.mb4px{margin-bottom:4px!important}.mb5px{margin-bottom:5px!important}.mb10px{margin-bottom:10px!important}.mb15px{margin-bottom:15px!important}.mb20px{margin-bottom:20px!important}.mb25px{margin-bottom:25px!important}.mb30px{margin-bottom:30px!important}.mb35px{margin-bottom:35px!important}.mb40px{margin-bottom:40px!important}.mb45px{margin-bottom:45px!important}.mb50px{margin-bottom:50px!important}.mb60px{margin-bottom:60px!important}.mb70px{margin-bottom:70px!important}.mb80px{margin-bottom:80px!important}.mb90px{margin-bottom:90px!important}.mb100px{margin-bottom:100px!important}.mb110px{margin-bottom:110px!important}.mb120px{margin-bottom:120px!important}.mb1pr{margin-bottom:1%!important}.mb2pr{margin-bottom:2%!important}.mb3pr{margin-bottom:3%!important}.mb4pr{margin-bottom:4%!important}.mb5pr{margin-bottom:5%!important}.mb6pr{margin-bottom:6%!important}.mb7pr{margin-bottom:7%!important}.mb8pr{margin-bottom:8%!important}.mb9pr{margin-bottom:9%!important}.mb10pr{margin-bottom:10%!important}.mb11pr{margin-bottom:11%!important}.mb12pr{margin-bottom:12%!important}.mb13pr{margin-bottom:13%!important}.mb14pr{margin-bottom:14%!important}.mb15pr{margin-bottom:15%!important}.mb16pr{margin-bottom:16%!important}.mb17pr{margin-bottom:17%!important}.mb18pr{margin-bottom:18%!important}.mb19pr{margin-bottom:19%!important}.mb20pr{margin-bottom:20%!important}.mb1rem{margin-bottom:1rem!important}.mb2rem{margin-bottom:2rem!important}.mb3rem{margin-bottom:3rem!important}.mb4rem{margin-bottom:4rem!important}.mb5rem{margin-bottom:5rem!important}.mb6rem{margin-bottom:6rem!important}.mb7rem{margin-bottom:7rem!important}.mb8rem{margin-bottom:8rem!important}.mb9rem{margin-bottom:9rem!important}.mb10rem{margin-bottom:10rem!important}.mr1px{margin-right:1px!important}.mr2px{margin-right:2px!important}.mr3px{margin-right:3px!important}.mr4px{margin-right:4px!important}.mr5px{margin-right:5px!important}.mr10px{margin-right:10px!important}.mr15px{margin-right:15px!important}.mr20px{margin-right:20px!important}.mr25px{margin-right:25px!important}.mr30px{margin-right:30px!important}.mr35px{margin-right:35px!important}.mr40px{margin-right:40px!important}.mr45px{margin-right:45px!important}.mr50px{margin-right:50px!important}.mr60px{margin-right:60px!important}.mr70px{margin-right:70px!important}.mr80px{margin-right:80px!important}.mr90px{margin-right:90px!important}.mr100px{margin-right:100px!important}.mr110px{margin-right:110px!important}.mr120px{margin-right:120px!important}.mr1pr{margin-right:1%!important}.mr2pr{margin-right:2%!important}.mr3pr{margin-right:3%!important}.mr4pr{margin-right:4%!important}.mr5pr{margin-right:5%!important}.mr6pr{margin-right:6%!important}.mr7pr{margin-right:7%!important}.mr8pr{margin-right:8%!important}.mr9pr{margin-right:9%!important}.mr10pr{margin-right:10%!important}.mr11pr{margin-right:11%!important}.mr12pr{margin-right:12%!important}.mr13pr{margin-right:13%!important}.mr14pr{margin-right:14%!important}.mr15pr{margin-right:15%!important}.mr16pr{margin-right:16%!important}.mr17pr{margin-right:17%!important}.mr18pr{margin-right:18%!important}.mr19pr{margin-right:19%!important}.mr20pr{margin-right:20%!important}.mr1rem{margin-right:1rem!important}.mr2rem{margin-right:2rem!important}.mr3rem{margin-right:3rem!important}.mr4rem{margin-right:4rem!important}.mr5rem{margin-right:5rem!important}.mr6rem{margin-right:6rem!important}.mr7rem{margin-right:7rem!important}.mr8rem{margin-right:8rem!important}.mr9rem{margin-right:9rem!important}.mr10rem{margin-right:10rem!important}.ml1px{margin-left:1px!important}.ml2px{margin-left:2px!important}.ml3px{margin-left:3px!important}.ml4px{margin-left:4px!important}.ml5px{margin-left:5px!important}.ml10px{margin-left:10px!important}.ml15px{margin-left:15px!important}.ml20px{margin-left:20px!important}.ml25px{margin-left:25px!important}.ml30px{margin-left:30px!important}.ml35px{margin-left:35px!important}.ml40px{margin-left:40px!important}.ml45px{margin-left:45px!important}.ml50px{margin-left:50px!important}.ml60px{margin-left:60px!important}.ml70px{margin-left:70px!important}.ml80px{margin-left:80px!important}.ml90px{margin-left:90px!important}.ml100px{margin-left:100px!important}.ml110px{margin-left:110px!important}.ml120px{margin-left:120px!important}.ml1pr{margin-left:1%!important}.ml2pr{margin-left:2%!important}.ml3pr{margin-left:3%!important}.ml4pr{margin-left:4%!important}.ml5pr{margin-left:5%!important}.ml6pr{margin-left:6%!important}.ml7pr{margin-left:7%!important}.ml8pr{margin-left:8%!important}.ml9pr{margin-left:9%!important}.ml10pr{margin-left:10%!important}.ml11pr{margin-left:11%!important}.ml12pr{margin-left:12%!important}.ml13pr{margin-left:13%!important}.ml14pr{margin-left:14%!important}.ml15pr{margin-left:15%!important}.ml16pr{margin-left:16%!important}.ml17pr{margin-left:17%!important}.ml18pr{margin-left:18%!important}.ml19pr{margin-left:19%!important}.ml20pr{margin-left:20%!important}.ml1rem{margin-left:1rem!important}.ml2rem{margin-left:2rem!important}.ml3rem{margin-left:3rem!important}.ml4rem{margin-left:4rem!important}.ml5rem{margin-left:5rem!important}.ml6rem{margin-left:6rem!important}.ml7rem{margin-left:7rem!important}.ml8rem{margin-left:8rem!important}.ml9rem{margin-left:9rem!important}.ml10rem{margin-left:10rem!important} /* padding ----------*/ .pt1px{padding-top:1px!important}.pt2px{padding-top:2px!important}.pt3px{padding-top:3px!important}.pt4px{padding-top:4px!important}.pt5px{padding-top:5px!important}.pt10px{padding-top:10px!important}.pt15px{padding-top:15px!important}.pt20px{padding-top:20px!important}.pt25px{padding-top:25px!important}.pt30px{padding-top:30px!important}.pt35px{padding-top:35px!important}.pt40px{padding-top:40px!important}.pt45px{padding-top:45px!important}.pt50px{padding-top:50px!important}.pt60px{padding-top:60px!important}.pt70px{padding-top:70px!important}.pt80px{padding-top:80px!important}.pt90px{padding-top:90px!important}.pt100px{padding-top:100px!important}.pt110px{padding-top:110px!important}.pt120px{padding-top:120px!important}.pt1pr{padding-top:1%!important}.pt2pr{padding-top:2%!important}.pt3pr{padding-top:3%!important}.pt4pr{padding-top:4%!important}.pt5pr{padding-top:5%!important}.pt6pr{padding-top:6%!important}.pt7pr{padding-top:7%!important}.pt8pr{padding-top:8%!important}.pt9pr{padding-top:9%!important}.pt10pr{padding-top:10%!important}.pt11pr{padding-top:11%!important}.pt12pr{padding-top:12%!important}.pt13pr{padding-top:13%!important}.pt14pr{padding-top:14%!important}.pt15pr{padding-top:15%!important}.pt16pr{padding-top:16%!important}.pt17pr{padding-top:17%!important}.pt18pr{padding-top:18%!important}.pt19pr{padding-top:19%!important}.pt20pr{padding-top:20%!important}.pt1rem{padding-top:1rem!important}.pt2rem{padding-top:2rem!important}.pt3rem{padding-top:3rem!important}.pt4rem{padding-top:4rem!important}.pt5rem{padding-top:5rem!important}.pt6rem{padding-top:6rem!important}.pt7rem{padding-top:7rem!important}.pt8rem{padding-top:8rem!important}.pt9rem{padding-top:9rem!important}.pt10rem{padding-top:10rem!important}.pb1px{padding-bottom:1px!important}.pb2px{padding-bottom:2px!important}.pb3px{padding-bottom:3px!important}.pb4px{padding-bottom:4px!important}.pb5px{padding-bottom:5px!important}.pb10px{padding-bottom:10px!important}.pb15px{padding-bottom:15px!important}.pb20px{padding-bottom:20px!important}.pb25px{padding-bottom:25px!important}.pb30px{padding-bottom:30px!important}.pb35px{padding-bottom:35px!important}.pb40px{padding-bottom:40px!important}.pb45px{padding-bottom:45px!important}.pb50px{padding-bottom:50px!important}.pb60px{padding-bottom:60px!important}.pb70px{padding-bottom:70px!important}.pb80px{padding-bottom:80px!important}.pb90px{padding-bottom:90px!important}.pb100px{padding-bottom:100px!important}.pb110px{padding-bottom:110px!important}.pb120px{padding-bottom:120px!important}.pb1pr{padding-bottom:1%!important}.pb2pr{padding-bottom:2%!important}.pb3pr{padding-bottom:3%!important}.pb4pr{padding-bottom:4%!important}.pb5pr{padding-bottom:5%!important}.pb6pr{padding-bottom:6%!important}.pb7pr{padding-bottom:7%!important}.pb8pr{padding-bottom:8%!important}.pb9pr{padding-bottom:9%!important}.pb10pr{padding-bottom:10%!important}.pb11pr{padding-bottom:11%!important}.pb12pr{padding-bottom:12%!important}.pb13pr{padding-bottom:13%!important}.pb14pr{padding-bottom:14%!important}.pb15pr{padding-bottom:15%!important}.pb16pr{padding-bottom:16%!important}.pb17pr{padding-bottom:17%!important}.pb18pr{padding-bottom:18%!important}.pb19pr{padding-bottom:19%!important}.pb20pr{padding-bottom:20%!important}.pb1rem{padding-bottom:1rem!important}.pb2rem{padding-bottom:2rem!important}.pb3rem{padding-bottom:3rem!important}.pb4rem{padding-bottom:4rem!important}.pb5rem{padding-bottom:5rem!important}.pb6rem{padding-bottom:6rem!important}.pb7rem{padding-bottom:7rem!important}.pb8rem{padding-bottom:8rem!important}.pb9rem{padding-bottom:9rem!important}.pb10rem{padding-bottom:10rem!important}.pr1px{padding-right:1px!important}.pr2px{padding-right:2px!important}.pr3px{padding-right:3px!important}.pr4px{padding-right:4px!important}.pr5px{padding-right:5px!important}.pr10px{padding-right:10px!important}.pr15px{padding-right:15px!important}.pr20px{padding-right:20px!important}.pr25px{padding-right:25px!important}.pr30px{padding-right:30px!important}.pr35px{padding-right:35px!important}.pr40px{padding-right:40px!important}.pr45px{padding-right:45px!important}.pr50px{padding-right:50px!important}.pr60px{padding-right:60px!important}.pr70px{padding-right:70px!important}.pr80px{padding-right:80px!important}.pr90px{padding-right:90px!important}.pr100px{padding-right:100px!important}.pr110px{padding-right:110px!important}.pr120px{padding-right:120px!important}.pr1pr{padding-right:1%!important}.pr2pr{padding-right:2%!important}.pr3pr{padding-right:3%!important}.pr4pr{padding-right:4%!important}.pr5pr{padding-right:5%!important}.pr6pr{padding-right:6%!important}.pr7pr{padding-right:7%!important}.pr8pr{padding-right:8%!important}.pr9pr{padding-right:9%!important}.pr10pr{padding-right:10%!important}.pr11pr{padding-right:11%!important}.pr12pr{padding-right:12%!important}.pr13pr{padding-right:13%!important}.pr14pr{padding-right:14%!important}.pr15pr{padding-right:15%!important}.pr16pr{padding-right:16%!important}.pr17pr{padding-right:17%!important}.pr18pr{padding-right:18%!important}.pr19pr{padding-right:19%!important}.pr20pr{padding-right:20%!important}.pr1rem{padding-right:1rem!important}.pr2rem{padding-right:2rem!important}.pr3rem{padding-right:3rem!important}.pr4rem{padding-right:4rem!important}.pr5rem{padding-right:5rem!important}.pr6rem{padding-right:6rem!important}.pr7rem{padding-right:7rem!important}.pr8rem{padding-right:8rem!important}.pr9rem{padding-right:9rem!important}.pr10rem{padding-right:10rem!important}.pl1px{padding-left:1px!important}.pl2px{padding-left:2px!important}.pl3px{padding-left:3px!important}.pl4px{padding-left:4px!important}.pl5px{padding-left:5px!important}.pl10px{padding-left:10px!important}.pl15px{padding-left:15px!important}.pl20px{padding-left:20px!important}.pl25px{padding-left:25px!important}.pl30px{padding-left:30px!important}.pl35px{padding-left:35px!important}.pl40px{padding-left:40px!important}.pl45px{padding-left:45px!important}.pl50px{padding-left:50px!important}.pl60px{padding-left:60px!important}.pl70px{padding-left:70px!important}.pl80px{padding-left:80px!important}.pl90px{padding-left:90px!important}.pl100px{padding-left:100px!important}.pl110px{padding-left:110px!important}.pl120px{padding-left:120px!important}.pl1pr{padding-left:1%!important}.pl2pr{padding-left:2%!important}.pl3pr{padding-left:3%!important}.pl4pr{padding-left:4%!important}.pl5pr{padding-left:5%!important}.pl6pr{padding-left:6%!important}.pl7pr{padding-left:7%!important}.pl8pr{padding-left:8%!important}.pl9pr{padding-left:9%!important}.pl10pr{padding-left:10%!important}.pl11pr{padding-left:11%!important}.pl12pr{padding-left:12%!important}.pl13pr{padding-left:13%!important}.pl14pr{padding-left:14%!important}.pl15pr{padding-left:15%!important}.pl16pr{padding-left:16%!important}.pl17pr{padding-left:17%!important}.pl18pr{padding-left:18%!important}.pl19pr{padding-left:19%!important}.pl20pr{padding-left:20%!important}.pl1rem{padding-left:1rem!important}.pl2rem{padding-left:2rem!important}.pl3rem{padding-left:3rem!important}.pl4rem{padding-left:4rem!important}.pl5rem{padding-left:5rem!important}.pl6rem{padding-left:6rem!important}.pl7rem{padding-left:7rem!important}.pl8rem{padding-left:8rem!important}.pl9rem{padding-left:9rem!important}.pl10rem{padding-left:10rem!important} /* align ----------*/ .ac { text-align: center !important; } .ar { text-align: right !important; } .al { text-align: left !important; } /* sup sub ----------*/ sup, sub { position: relative; height: 0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; } sup { bottom: 1ex; } sub { top: 0.5ex; } /* small ----------*/ small { font-size: 75%; vertical-align: baseline; } /* pc sp ----------*/ @media screen and (min-width:897px) { /* iPhone 横以上 */ .sp { display: none !important; } } @media screen and (max-width:896px) { /* iPhone 横 */ .pc { display: none !important; } } @media screen and (min-width: 895px) { a[href^="tel:"] { pointer-events: none; } } /* common parts ==============================*/ /* setflexPanelLayout ----------*/ *[class^="fpl-"], *[class*=" fpl-"] { display: flex; flex-flow: row wrap; opacity: 0; } /* h p lead ----------*/ h1, h2, h3, h4, h5, h6, .lead { word-break: auto-phrase; line-height: 1.4; font-weight: bold; text-wrap: balance; } .h2 { font-size: 2.4rem; display: flex; justify-content: center; flex-direction: column; gap: 2rem; } .h2.-white { color: #FFF; } .h2::after { content: ""; width: 6rem; height: 1px; border-top: solid 1px #46C69D; margin: auto; } .h2.-white::after { border-top: solid 1px #FFF; } .h2 svg { margin: auto; width: 6rem; aspect-ratio: 1 / 1; fill: #46C69D; } .h2.-white svg { fill: #FFF; } .h2 span { text-align: center; } .h3 { margin: 2em 0 1em 0; font-size: 2.4rem; } .h4 { margin: 1.6em 0 0.5em 0; font-size: 2.0rem; } .h5 { margin: 1.4em 0 0.5em 0; font-size: 1.8rem; } .h6 { margin: 1.2em 0 0.5em 0; font-size: 1.6rem; } p { margin: 0.5em 0; text-align: justify; text-justify: inter-character; /*英語単語の場合は text-justify: inter-word*/ } .lead { margin: 2em 0 1.3em 0; font-size: 2.4rem; } .lead.-l { font-size: 3.6rem; } .lead.-s { font-size: 2rem; } .cap { line-height: 1.4; font-size: 1.4rem; } .cap.-s { font-size: 1.2rem; } * .h2:nth-child(1), * .h3:nth-child(1), * .h4:nth-child(1), * .h5:nth-child(1), * .h6:nth-child(1), * .lead.-l:nth-child(1), * .lead:nth-child(1), * .lead.-s:nth-child(1), * p:nth-child(1) { margin-top: 0; } * .h2:last-child, * .h3:last-child, * .h4:last-child, * .h5:last-child, * .h6:last-child, * .lead.-l:last-child, * .lead:last-child, * .lead.-s:last-child, * p:last-child { margin-bottom: 0; } @media screen and (max-width:480px) { /* s */ .h2 { font-size: 2rem; } p { text-align: left; text-justify: unset; } } /* bt ----------*/ .bt { display: inline-block; border: none; background-color: transparent; text-decoration: none; transition: opacity 0.3s ease-out; } .bt:hover { opacity: 0.6; } .bt.-w100, .bt.-w100 > input { width: 100%; } .bt.-w90, .bt.-w90 > input { width: 90%; } .bt.-w80, .bt.-w80 > input { width: 80%; } .bt.-w70, .bt.-w70 > input { width: 70%; } .bt.-w60, .bt.-w60 > input { width: 60%; } .bt.-w50, .bt.-w50 > input { width: 50%; } .bt > span, .bt > input { display: flex; padding: 1em 2em; color: #FFF; background-color: #333; line-height: 1.2; font-size: 1.6rem; font-weight: bold; gap: 0.5em; align-items: center; white-space: pre-wrap; } .bt.-ac > span, .bt.-ac > input { justify-content: center; } .bt.-r10 > span, .bt.-r10 > input { border-radius: 10rem; } .bt.-r2 > span, .bt.-r2 > input { border-radius: 2rem; } .bt.-r1 > span, .bt.-r1 > input { border-radius: 1rem; } .bt.-r05 > span, .bt.-r05 > input { border-radius: 0.5rem; } .bt > input { border: none; } .bt.-ir > span, .bt.-il > span { position: relative; padding: 1em 3em; } .bt.-ir > span { position: relative; padding-left: 2em; } .bt.-il > span { position: relative; padding-right: 2em; } .bt.-ir > span i { position: absolute; right: 1em; display: grid; place-items: center; } .bt.-il > span i { position: absolute; left: 1em; display: grid; place-items: center; } .bt.-ic > span { padding: 1em; } .bt.-ic > span i { width: 1em; height: 1em; } .bt.-s > span, .bt.-s > input { font-size: 1.4rem; } .bt.-l > span, .bt.-l > input { font-size: 2rem; } .bt.-border > span, .bt.-border > input { border: solid 1px #DDD; color: #333; background-color: #FFF; } .bt.-contact > span { color: #2D9372; background-color: #FFFF00; justify-content: center; } .bt.-contact > span svg { width: 3rem; aspect-ratio: 1 / 1; fill: #2D9372 !important; } .bt.-download > span { border: solid 1px rgba(255,255,255,0.63); color: #FFF; background-color: #0C6448; justify-content: center; } .bt.-download > span svg { width: 3rem; aspect-ratio: 1 / 1; fill: #FFF !important; } /* list ----------*/ .list { margin: 1em 0; } .list.-ul > li, .list.-ol > li { margin-left: 2rem; margin-bottom: 0.6rem; line-height: 1.4; font-size: 1.6rem; } .list.-ul > li { list-style: disc; list-style-position: outside; } .list.-ol > li { list-style: decimal; list-style-position: outside; } .list.-notes > li { margin-bottom: 0.6rem; padding-left: 1em; opacity: 0.7; text-indent: -1em; line-height: 1.4; font-size: 80%; } .list.-td { display: table; width: 100%; border-top: dotted 1px #DDD; } .list.-td > li { display: table-row; } .list.-td > li .t, .list.-td > li .d { display: table-cell; padding: 2rem 0; border-bottom: dotted 1px #DDD; } .list.-td.-s > li .t, .list.-td.-s > li .d { padding: 1rem 0; } .list.-td > li .t { padding-right: 2rem; color: #333; font-size: 80%; font-weight: bold; } .list.-td > li .d {} @media screen and (max-width:480px) { /* iPhone 縦 */ .list.-resp > li .t, .list.-resp > li .d { display: block; } .list.-resp > li .t { padding-bottom: 0; border: none; } .list.-resp > li .d { padding-top: 1rem; } } * .list:nth-child(1) { margin-top: 0; } * .list:last-child { margin-bottom: 0; } /* table ----------*/ .table_wrap { width: 100%; overflow-x: auto; } table { border-collapse: separate; } .table { width: 100%; margin: 2em 0; border: solid 1px #DDD; } .table tr {} .table th, .table td { border-right: dotted 1px #DDD; border-bottom: dotted 1px #DDD; } .table th { padding: 1rem; background-color: #f6f6f6; vertical-align: middle; } .table td { padding: 2rem; } .table.-s td { padding: 1rem; } @media screen and (max-width:480px) { /* iPhone 縦 */ .table.-resp tr, .table.-resp th, .table.-resp td { display: block; width: 100%; } } * .table:nth-child(1) { margin-top: 0; } * .table:last-child { margin-bottom: 0; } /* box ----------*/ .box { margin: 2em 0; padding: 3rem; } .box.-border { border: solid 1px #DDD; } .box.-light_gray { background-color: #EEE; } * .box:nth-child(1) { margin-top: 0; } * .box:last-child { margin-bottom: 0; } /* light_gallery background opacity ----------*/ .lg-backdrop.in { opacity: 0.8; } /* owl-carousel-pg ----------*/ .owl-carousel-pg { position: relative; } .owl-carousel-pg .owl-dots { position: absolute; z-index: 999; bottom: 1rem; right: 1rem; display: flex !important; height: 1rem; line-height: 1; gap: 0.5rem; } .owl-carousel-pg .owl-dots .owl-dot { width: 1rem; height: 1rem; } .owl-carousel-pg .owl-dots .owl-dot span { display: inline-block; width: inherit; height: inherit; opacity: 0.8; background-color: #999; } .owl-carousel-pg .owl-dots .active {} .owl-carousel-pg .owl-dots .active span { opacity: 1; background-color: #FFF; } /* common layout ==============================*/ /* bodyWrap ----------*/ #bodyWrap {} #bodyWrap .inner { max-width: 148rem; margin: 0 auto; padding: 0 2rem; } /* contentsWrap ----------*/ #contentsWrap {} /* header ----------*/ #header { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; display: flex; align-items: center; padding: 2rem 4rem; gap: 2rem; transition: background-color 0.3s ease-out, backdrop-filter 0.3s ease-out; } .show_pageup #header { background-color: rgba(70, 198, 157, 0.8); backdrop-filter: blur(8px); } #header .logo { position: relative; z-index: 2; } #header .logo a {} #header .logo a span { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; } #header .logo a svg { fill: #FFF; width: 12rem; aspect-ratio: 12 / 5; } @media screen and (max-width:1680px) { #header { padding: 1rem; } } @media screen and (max-width:1380px) { #header .logo a svg { width: 10rem; } } @media screen and (max-width:1200px) { #header { padding: 0 0 0 1rem; } } /* nav ----------*/ #nav { margin-left: auto; } #nav ul { display: flex; align-items: center; gap: 3rem; } #nav ul li {} #nav ul li a { text-decoration: none; color: #FFF; display: flex; align-items: center; gap: 0.5rem; font-size: 1.6rem; font-weight: bold; } #nav ul li a svg { width: 3rem; aspect-ratio: 1 / 1; fill: #FFF; } #nav ul li .-contact span { padding-top: 1rem !important; padding-bottom: 1rem !important; flex-direction: column; row-gap: 0; text-align: center; } #nav ul li .-contact span small { font-size: 1.4rem; line-height: 1; } #nav ul li.download { margin-left: -2rem; } #nav ul li .-download span { padding-top: 1.7rem !important; padding-bottom: 1.7rem !important; } @media screen and (max-width:1680px) { #nav ul { gap: 1.5rem; } #nav ul li a { font-size: 1.4rem; } #nav ul li a svg { width: 2rem; } #nav ul li .-contact span svg { width: 3rem; } #nav ul li.download { margin-left: -1rem; } #nav ul li .-download span svg { width: 3rem; } } @media screen and (max-width:1380px) { #nav ul li a { font-size: 1.3rem; } #nav ul li .-contact span { font-size: 1.4rem !important; padding: 0.6rem 2.5rem !important; gap: 0; } #nav ul li .-download span { font-size: 1.4rem !important; padding: 1.3rem 1.5rem !important; gap: 0; } } @media screen and (max-width:1200px) { #nav { position: absolute; width: 100%; height: 100vh; top: 0; left: 100%; background-color: rgba(70, 198, 157, 1); opacity: 0; overflow: hidden; transition: all 0.3s ease-out; } .nav_open #nav { left: 0; opacity: 1; overflow-y: auto; } #nav ul { flex-direction: column; padding: 10rem 4rem 10rem; align-items: start; gap: 3rem; } #nav ul li { width: 100%; } #nav ul li a { font-size: 2.4rem; gap: 1rem; } #nav ul li a svg { width: 4rem; } #nav ul li .-contact span { width: 100%; justify-content: center; font-size: 2.4rem !important; padding: 1.5rem 3rem !important; gap: 1rem; } #nav ul li.download { display: block; margin-top: -1rem; margin-left: 0; } #nav ul li .-download span { width: 100%; justify-content: center; font-size: 2.4rem !important; padding: 1.5rem 3rem !important; gap: 1rem; } #nav ul li.sp-sitemap { display: block !important; margin-top: 0; border-top: 1px solid rgba(255,255,255,0.4); padding-top: 3rem; padding-left: 2rem; } #nav ul li.sp-sitemap .sp-sitemap-col { margin-bottom: 2rem; } #nav ul li.sp-sitemap .sp-sitemap-title { font-size: 2.4rem; font-weight: bold; color: #FFF; margin-bottom: 0.5rem; line-height: 1.4; } #nav ul li.sp-sitemap .sp-sitemap-title a { font-size: 2.4rem !important; font-weight: bold; color: #FFF; text-decoration: none; display: block; gap: 0 !important; margin-bottom: 1rem; } #nav ul li.sp-sitemap ul { flex-direction: column; gap: 0.5rem !important; padding: 0 0 0 0.5rem !important; margin-top: 0; } #nav ul li.sp-sitemap ul li { width: 100%; } #nav ul li.sp-sitemap ul li a { font-size: 2.2rem !important; color: #FFF; text-decoration: none; padding-left: 0.5rem; font-weight: normal; gap: 0 !important; display: block; width: 100%; font-weight: 500;} } /* sp-sitemap ----------*/ #nav ul li.sp-sitemap { display: none; } /* navBar ----------*/ #navBar { position: relative; display: none; margin-left: auto; width: 6rem; height: 6rem; background-color: rgba(0, 0, 0, 0.5); } #navBar:hover { cursor: pointer; } #navBar span { position: relative; display: block; width: inherit; height: inherit; } #navBar:after, #navBar span:before, #navBar span:after { position: absolute; left: 25%; content: ""; display: block; width: 50%; height: 0; border-bottom: solid 2px #FFF; transition: all 0.2s ease-out; } #navBar:after { top: 28%; } #navBar span:before { top: calc(50% - 1px); } #navBar span:after { bottom: 28%; } #navBar:hover:after { top: 35%; } #navBar:hover span:after { bottom: 35%; } .nav_open { /*position: fixed;*/ z-index: -1; width: 100%; height: 100%; overflow-y: scroll; } .nav_open #navBar:after { top: calc(50% - 1px); -webkit-transform: rotate(135deg); transform: rotate(135deg); } .nav_open #navBar span:before { opacity: 0; } .nav_open #navBar span:after { bottom: calc(50% - 1px); -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } @media screen and (max-width:1200px) { #navBar { display: block; } } /* main ----------*/ #main {} #main .sec { padding: 8rem 0; } @media screen and (max-width:480px) { /* s */ #main .sec { padding: 5rem 0; } } /* pageup ----------*/ #pageup { position: sticky; z-index: 90; bottom: 1rem; left: auto; right: 1rem; width: 6rem; margin-left: auto; margin-top: -7rem; opacity: 0; transition: all 0.3s ease-out; visibility: hidden; } .show_pageup #pageup { opacity: 1; visibility: visible; } #pageup a { position: relative; display: block; width: 6rem; height: 6rem; border-radius: 6rem; background-color: rgba(0, 0, 0, 0.8); } #pageup span { position: relative; display: block; width: inherit; height: inherit; overflow: hidden; padding-top: 100%; } #pageup a:after, #pageup span:before, #pageup span:after { content: ""; position: absolute; display: block; width: 50%; height: 0; border-top: solid 2px #FFF; transition: all 0.2s ease-out; } #pageup a:after { top: 30%; left: 25%; width: 50%; } #pageup span:before, #pageup span:after { bottom: 30%; width: 30.5%; } #pageup span:before { right: 24%; -webkit-transform: rotate(45deg); transform: rotate(45deg); } #pageup span:after { left: 24%; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } #pageup:hover span:before, #pageup:hover span:after { bottom: 45%; } @media screen and (max-width:480px) { /* s */ #pageup { width: 4rem; margin-top: -5rem; } #pageup a { width: 4rem; height: 4rem; border-radius: 4rem; } } /* footer ----------*/ #footer { padding-top: 6rem; padding-bottom: 3rem; } #footer .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 4rem; } #footer .w { display: flex; gap: 5rem; align-items: center; flex-shrink: 0; } #footer .w-left { display: flex; flex-direction: column; gap: 2.5rem; } #footer .w2 { display: flex; gap: 2rem; align-items: center; margin-top: 3rem; } #footer .logo a span { position: absolute; width: 1px; height: 1px; overflow: hidden; margin: -1px; padding: 0; border: 0; clip: rect(0, 0, 0, 0); white-space: nowrap; } #footer .logo a svg { fill: #333; width: 16rem; aspect-ratio: 12 / 5; } #footer .tx { font-size: 1.4rem; } #footer .tx strong { font-size: 1.8rem; } #footer .jpx { display: flex; gap: 1.5rem; align-items: end; font-size: 1.4rem; } #footer .link { display: flex; gap: 3rem; align-items: end; } #footer .link a { text-decoration: none; color: #333; font-size: 1.4rem; } #footer .copy { margin-left: auto; font-size: 1.2rem; } #footer-sitemap { display: flex; justify-content: flex-end; align-items: flex-start; gap: 0; text-align: left; } #footer-sitemap > .footer-col { width: 16rem; flex-shrink: 0; padding-right: 3rem; } #footer-sitemap .footer-col-title { color: #333; font-weight: bold; font-size: 1.4rem; margin: 0.45rem 0; } #footer-sitemap .footer-col-title a { color: #333; text-decoration: none; } #footer-sitemap .footer-col-title a:hover { opacity: 0.6; } #footer-sitemap .footer-col ul { margin-top: 0.5rem; padding-left: 0.5rem; } #footer-sitemap .footer-col ul li { margin: 0.4rem 0; } #footer-sitemap .footer-col ul li a { text-decoration: none; font-size: 1.4rem; color: #333; } #footer-sitemap .footer-col ul li a:hover { opacity: 0.6; } #footer-sitemap .footer-col-group { display: flex; flex-direction: column; gap: 0; } #footer-sitemap .footer-col-group .footer-col { width: 14rem; padding-right: 0; } @media screen and (min-width: 1251px) { #footer .w-left { display: contents; } } @media (max-width: 1080px) { #footer .w { gap: 3rem; flex-shrink: initial; flex-wrap: wrap; } } @media screen and (max-width:896px) { /* m */ #footer .footer-top { flex-direction: column; align-items: center; gap: 3rem; } #footer .w { flex-direction: column; gap: 3rem; align-items: center; } #footer .w-left { align-items: center;} #footer .tx { text-align: center; } #footer-sitemap { display: grid; grid-template-columns: auto auto; gap: 1rem 5rem; justify-content: center; } #footer-sitemap > .footer-col { width: auto; padding-right: 0; } #footer-sitemap .footer-col-group { display: contents; } #footer-sitemap .footer-col-group .footer-col { width: auto; } } @media screen and (max-width:480px) { /* s */ #footer .logo a svg { width: 12rem; } #footer a { color: #333; } #footer .jpx { flex-direction: column; align-items: center; gap: 0.5rem; } #footer .w2 { flex-direction: column; margin-top: 4rem; gap: 1rem; } #footer .copy { margin: auto; } #footer-sitemap .footer-col-title { font-size: 1.6rem; } #footer-sitemap .footer-col ul li a { font-size: 1.6rem; } } /* pagination ----------*/ .pagination { padding-top: 4rem; text-align: center; } .pagination .pagination_wrap { display: flex; justify-content: center; } .pagination .pagination_wrap a, .pagination .pagination_wrap span { display: inline-block; margin-top: 0.5rem; margin-bottom: 0.5rem; width: 4rem; height: 4rem; border: solid 1px #DDD; color: #333; background-color: #FFF; text-decoration: none; text-align: center; line-height: 1; line-height: 4rem; font-size: 2rem; font-weight: bold; } .pagination .pagination_wrap .pre, .pagination .pagination_wrap .nex {} .pagination .pagination_wrap .pre { margin-right: 1rem; } .pagination .pagination_wrap .nex { margin-left: 1rem; } .pagination .pagination_wrap .pre-in, .pagination .pagination_wrap .nex-in {} .pagination .pagination_wrap .pre-in {} .pagination .pagination_wrap .nex-in {} .pagination .pagination_wrap .pre-out, .pagination .pagination_wrap .nex-out {} .pagination .pagination_wrap .pre-out {} .pagination .pagination_wrap .nex-out {} .pagination .pagination_wrap .current { margin-right: 0; margin-left: 0; border-color: #130E75; color: #FFF; background-color: #130E75; } .pagination .pagination_wrap .inactive { margin-left: -1px; } .pagination .pagination_wrap .still { border: none; } @media screen and (max-width:1260px) { /* x */ } @media screen and (max-width:1024px) { /* l */ } @media screen and (max-width:896px) { /* m */ } @media screen and (max-width:480px) { /* s */ } @media only screen and (orientation:landscape) { /* 横 */ } @media only screen and (orientation:portrait) { /* 縦 */ } /* memo animate transition: all 0.3s ease-out; radius border-radius: 5px; box-shadow box-shadow: 10px 10px 10px rgba(0,0,0,0.4); text-shadow text-shadow: 0 0 10px rgba(0,0,0,0.6); rotate -webkit-transform: rotate(45deg); transform: rotate(45deg); skew -webkit-transform: skew(45deg); transform: skew(45deg); scale -webkit-transform: scale(1,1); transform: scale(1,1); translate -webkit-transform: translate(0,0); transform: translate(0,0); perspective -webkit-transform: perspective(500px); transform: perspective(500px); origin -webkit-transform-origin: left bottom; transform-origin: left bottom; V center position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); H center position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); triangle width: 0; height: 0; border: 80px solid transparent; border-top: 80px solid #f00; 上下中央 display: grid; place-items: center; -webkit-overflow-scrolling: touch; pointer-events: none; will-change: transform; inline padding -webkit-box-decoration-break: clone; box-decoration-break: clone; */