/*
Last Updated: 2024-08-01
Author: zeal
Theme Name: risoutochi
*/
*{
box-sizing: border-box;
}
:root {
--text12: clamp(1.0rem,1.375vw,1.2rem);
--text14: clamp(1.2rem,1.625vw,1.4rem);
--text16: clamp(1.4rem,1.875vw,1.6rem);
--text18: clamp(1.6rem,2.125vw,1.8rem);
--text19: clamp(1.6rem,2.1875vw,1.9rem);
--text20: clamp(1.8rem,2.375vw,2.0rem);
--text22: clamp(1.9rem,2.5625vw,2.2rem);
--text24: clamp(2.0rem,2.75vw,2.4rem);
--text26: clamp(2.1rem,2.9375vw,2.6rem);
--text30: clamp(2.5rem,3.4375vw,3.0rem);
--text33: clamp(2.7rem,3.75vw,3.3rem);
--text34: clamp(2.8rem,3.75vw,3.4rem);
--text36: clamp(2.8rem,4vw,3.6rem);
--text38: clamp(3rem,4vw,3.8rem);
--text40: clamp(3rem,4vw,4.0rem);
--text45: clamp(3.3rem,4.875vw,4.5rem);
--text48: clamp(3.4rem,5vw,4.8rem);
--text50: clamp(3.6rem,5.25vw,5.0rem);
--text60: clamp(4rem,6.25vw,6.0rem);
--text72: clamp(5rem,7.5vw,7.2rem);
--text75: clamp(5.2rem,7.775vw,7.5rem);
--text78: clamp(5.2rem,8vw,7.8rem);
--text80: clamp(5.4rem,8.5vw,8.0rem);
--text88: clamp(5.6rem,8.75vw,8.8rem);
--text90: clamp(5.8rem,9vw,9.0rem);
--text100: clamp(6rem,9.25vw,10.0rem);
--transition01: 0.4s linear;
--f_noto: "Noto Sans JP", sans-serif;
--f_pop: 'Noto Sans JP', sans-serif;
--arrow_yoko: 42 / 77;
--arrow_tate: 77 / 42;
--official_icon: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--mail_icon: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--arrow_down: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--arrow_up: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--arrow_left: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--arrow_right: url( 'data:image/svg+xml;utf-8,' ) no-repeat;
--h_height: 75px;
}
@media screen and (max-width: 599px) {
:root{
--h_height: 45px;
}
}
.h_height{
padding-top: var(--h_height);
}
/*----------------------------------------
全体
----------------------------------------*/
html{
font-family:'游明朝体','Yu Mincho','ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro','ＭＳ Ｐ明朝','ＭＳ 明朝','Sawarabi Mincho',serif;
font-size:62.5%;
color: #000;
-webkit-text-size-adjust:100%;
line-height:1.5;
font-weight: 500;
}
body{ font-size:1.4rem; }
address{
font-style: normal;
}
p{
color:#000;
font-feature-settings: "palt";
line-height: 2;
font-weight: normal;
}
img{
vertical-align: bottom;
backface-visibility: hidden;
height: auto;
}
a{
color:#000;
transition: all 0.3s;
text-decoration: none;
}
.op:hover{ opacity: 0.8; }
.op img{ transition: all 0.3s; }
.max_respon{max-width:100%;}
#container{ overflow: hidden; }
li{list-style:none; }
.center{ text-align:center; }
.block_center{
width: fit-content;
margin-inline: auto;
}
.text_center{
text-align: center;
}
.m_center{
margin-inline: auto;
}
.m_l_auto{
margin-left: auto;
}
.m_t_auto{
margin-top: auto;
}
.m_r_auto{
margin-right: auto;
}
.w_fit{width: fit-content;}
@media screen and (max-width: 599px) {
p{text-align:left;}
.sp_text_left{
text-align: left;
}
.sp_center{
text-align: center;
}
.sp_text_center{
text-align: center;
}
.sp_right{
text-align: right;
}
.text_center{
text-align: left;
}
}/*END*/
.f_pop{
font-family: "Poppins", sans-serif;
}
.f_noto{
font-family: 'Noto Sans JP', sans-serif;
}
.f_w100 {
font-weight: 100;
}
.f_w200 {
font-weight: 200;
}
.f_w300 {
font-weight: 300;
}
.f_w400 {
font-weight: 400;
}
.f_w500 {
font-weight: 500;
}
.f_w600 {
font-weight: 600;
}
.f_w700 {
font-weight: 700;
}
.f_w800 {
font-weight: 700;
}
.rela{
position:relative;
}
.abs{
position:absolute;
}
.z_1{
z-index: 1;
}
.z_2{
z-index: 2;
}
.z_3{
z-index: 3;
}
.z_4{
z-index: 4;
}
.z_5{
z-index: 5;
}
.order01{order: 1;}
.order02{order: 2;}
.order03{order: 3;}
.order04{order: 4;}
.order05{order: 5;}
.text_upper{
text-transform: uppercase;
}
.a_delay01{
animation-delay: 0.2s;
--animation_d: 0.2s;
}
.a_delay02{
animation-delay: 0.4s;
--animation_d: 0.4s;
}
.a_delay03{
animation-delay: 0.6s;
--animation_d: 0.6s;
}
.a_delay04{
animation-delay: 0.8s;
--animation_d: 0.8s;
}
.a_delay05{
animation-delay: 1s;
--animation_d: 1s;
}
.a_delay06{
animation-delay: 1.2s;
--animation_d: 1.2s;
}
.a_delay07{
animation-delay: 1.4s;
--animation_d: 1.4s;
}
.t_delay0{
transition-delay: 0s;
--transition_d: 0s;
}
.t_delay01{
transition-delay: 0.2s;
--transition_d: 0.2s;
}
.t_delay02{
transition-delay: 0.4s;
--transition_d: 0.4s;
}
.t_delay03{
transition-delay: 0.6s;
--transition_d: 0.6s;
}
.t_delay04{
transition-delay: 0.8s;
--transition_d: 0.8s;
}
.t_delay05{
transition-delay: 1s;
--transition_d: 1s;
}
.t_delay06{
transition-delay: 1.2s;
--transition_d: 1.2s;
}
.t_delay07{
transition-delay: 1.4s;
--transition_d: 1.4s;
}
.ttl_img650 img{
max-width: 650px;
}
.max_800{
max-width: 800px;
}
.max_840{
max-width: 840px;
--inner_frame_w: 840;
}
.max_920{
max-width: 920px;
}
.max_950{
max-width: 950px;
--inner_frame_w: 950;
}
/*----------------------------------------
text
----------------------------------------*/
.text_bold{ font-weight: bold; }
.text_bold800{ font-weight: 800; }
.text_normal{ font-weight: normal; }
.text_right{text-align:right;}
.text_left{text-align:left;}
.text_10{ font-size:1.0rem !important; }
.text_12{ font-size: var(--text12) }
.text_14{ font-size: var(--text14) }
.text_16{ font-size: var(--text16) }
.text_18{ font-size: var(--text18) }
.text_20{ font-size: var(--text20) }
.text_22{ font-size: var(--text22) }
.text_24{ font-size: var(--text24) }
.text_26{ font-size: var(--text26) }
.text_30{ font-size: var(--text30) }
.text_33{ font-size: var(--text33) }
.text_34{ font-size: var(--text34) }
.text_36{ font-size: var(--text36) }
.text_38{ font-size: var(--text38) }
.text_40{ font-size: var(--text40) }
.text_45{ font-size: var(--text45) }
.text_48{ font-size: var(--text48) }
.text_50{ font-size: var(--text50) }
.text_60{ font-size: var(--text60) }
.text_72{ font-size: var(--text72) }
.text_78{ font-size: var(--text78) }
.text_80{ font-size: var(--text80) }
.text_88{ font-size: var(--text88) }
.text_90{ font-size: var(--text90) }
.text_100{ font-size: var(--text100) }
.lh_34{ line-height: 3.4 ; }
.lh_32{ line-height: 3.2 ; }
.lh_30{ line-height: 3 ; }
.lh_28{ line-height: 2.8 ; }
.lh_26{ line-height: 2.6 ; }
.lh_25{ line-height: 2.5 ; }
.lh_24{ line-height: 2.4 ; }
.lh_22{ line-height: 2.2 ; }
.lh_20{ line-height: 2 ; }
.lh_18{ line-height: 1.8 ; }
.lh_16{ line-height: 1.6 ; }
.lh_15{ line-height: 1.5 ; }
.lh_14{ line-height: 1.4 ; }
.lh_12{ line-height: 1.2 ; }
.lh_11{ line-height: 1.1 ; }
.lh_10{ line-height: 1 ; }
.ls_1{ letter-spacing: 1px; }
.ls_15{ letter-spacing: 1.5px; }
.ls_2{ letter-spacing: 2px ; }
.ls_3{ letter-spacing: 3px ; }
.ls_4{ letter-spacing: 4px ; }
.ls_-1{ letter-spacing: -1px ; }
.ls_-2{ letter-spacing: -2px ; }
.ls_-3{ letter-spacing: -3px ; }
.ls_-4{ letter-spacing: -4px ; }
.ls_100{letter-spacing: calc(0.001em * 100);}
.ls_200{letter-spacing: calc(0.001em * 200);}
.ls_300{letter-spacing: calc(0.001em * 300);}
.ls_400{letter-spacing: calc(0.001em * 400);}
.ls_500{letter-spacing: calc(0.001em * 500);}
@media screen and (max-width: 599px){
.sp_lh_15{
line-height: 1.5!important;
}
p{ line-height: 1.8; }
}/*END*/
/*----------------------------------------
layout
----------------------------------------*/
.outline_frame{
width: 100%;
max-width: 1350px;
margin-left: auto;
margin-right: auto;
}
.inner_frame{
width: 100%;
max-width: 1200px;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
padding-inline: 20px;
}
.inner_frame_post{
width: 100%;
max-width:750px;
position: relative;
box-sizing: border-box;
margin:0 auto;
/* padding-right: 20px;
padding-left: 20px; */
}
@media screen and (max-width: 768px){
.inner_frame,.top_frame{
padding-right: 3%;
padding-left: 3%;
}
.large_inner_frame{
padding-right: 3%;
padding-left: 3%;
}
}/*END*/
@media screen and (max-width: 599px){
.inner_frame,.sp_inner_frame,.top_frame{
padding-right: 7.5%;
padding-left: 7.5%;
}
}/*END*/
/*----------------------------------------
header
----------------------------------------*/
body.open{
overflow: hidden;
}
/*@media screen and (max-width: 768px){*/
.menu_btn{
width: 75px;
aspect-ratio: 1/1;
position: relative;
cursor: pointer;
z-index: 9999;
background-color: #000;
}
.menu_btn::after{
content: "MENU";
font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
font-size: clamp(10px,1.5vw,14px);
color: #fff;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
transition: all 0.5s;
}
.menu_btn span{
display: inline-block;
width: 50%;
height: 1px;
/* background-image: url("../images/common/menu_btn_line.png"); */
background-color: #fff;
background-size: cover;
background-repeat: repeat-x;
position: absolute;
left: 25%;
transition: all 0.6s;
}
.menu_btn span:nth-child(1){
top: 20%;
}
.menu_btn span:nth-child(2){
top: 35%;
}
.menu_btn span:nth-child(3){
top: 50%;
}
.open .menu_btn span:nth-child(1){
transform: rotate(-45deg);
top: 40%;
}
.open .menu_btn span:nth-child(2){
opacity: 0;
}
.open .menu_btn span:nth-child(3){
transform: rotate(45deg);
bottom: auto;
top: 40%;
/* background: #c79f62; */
}
.head_logo img{
max-width: 315px;
}
.head_frame{
display: flex;
justify-content: space-between;
position: fixed;
width: 100%;
background-color: #fff;
z-index: 100;
align-items: center;
}
.open .head_frame{
background-color: transparent;
}
.open .drawer_none{
opacity: 0;
visibility: hidden;
}
.head_inner_frame{
display: flex;
align-items: center;
}
.head_nav_list ul{
display: flex;
}
.head_nav_list a{
display: inline-block;
padding: 0.5em 1em;
overflow: hidden;
transition: text-shadow 0.4s ease-in-out;
text-shadow: 0px 1.5em 0px rgb(0 0 0/0);
}
.head_nav_list a:hover{
text-shadow: 0px 1.5em 0px rgb(0 0 0/ 1);
}
.head_nav_list a span{
display: inline-block;
transition: translate 0.4s ease-in-out;
}
.head_nav_list a:hover span{
translate: 0 -1.5em;
}
@media screen and (max-width: 1199px) {
.head_nav_list{
display: none;
}
}
.head_nav_fl{
text-align: center;
}
.head_nav_fl a{
color: #fff;
font-size: var(--text16);
}
.drawer{
position: fixed;
background: #404040;
top: 0;
right: 0;
width: 100%;
overflow-y: scroll;
height: 100vh;
color: #fff;
display: flex;
justify-content: center;
visibility: hidden;
opacity: 0;
/*transform: translateX(100%);*/
transition: 0.5s ease-in-out;
z-index: 99;
align-items: center;
-ms-overflow-style: none;
/* Firefox 対応 */
scrollbar-width: none;
}
/* Chrome, Safari 対応 */
.drawer::-webkit-scrollbar {
display:none;
}
.drawer nav li > a{
color: #fff;
}
.drawer .nav_img{
width: 50%;
height: 100%;
background-color: #2470a0;
}
.drawer .nav_img img{
width: 100%;
height: 100%;
object-fit: contain;
}
.drawer nav{
display: flex;
width: 40%;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
flex-direction: column;
}
.drawer nav img{
max-width: 244px;
}
.drawer .nav_01 img{
max-width: 260px;
}
.drawer nav ul:nth-of-type(1),
.drawer nav ul:nth-of-type(2){
border-bottom: 1px solid #fff;
}
.drawer nav ul{
padding: 30px 0;
}
.drawer li{
padding-top: 15px;
padding-bottom: 15px;
}
.open .drawer{
visibility: visible;
opacity: 1;
transform: translateX(0);
}
.open .drawer ul li{
transform: translateX(0);
}
/*END*/
/*----------------------------------------
iframe中央配置
----------------------------------------*/
/*iframe比率維持*/
.map{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
padding: 50% 0 0;
text-align: center;
}
.map iframe{
width: 100%;
height: 100%;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
-ms-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.map{ z-index: 2; }/*chrome対策*/
/*----------------------------------------
contents concept
----------------------------------------*/
/* 共通 */
.top_line{
border-top: #000 1px solid;
}
.under_line{
border-bottom: 1px solid #000;
}
.top_line_fff{
border-top: #fff 1px solid;
}
.under_line_fff{
border-bottom: 1px solid #fff;
}
.line_all_fff{
border: 1px solid #fff;
}
.under_line_dots{
background-image : linear-gradient(to right, #000 1px, transparent 2px);
background-size: 7px 1px;
background-repeat: repeat-x;
background-position: left bottom;
width: 95%;
margin: 0 auto;
}
.bg_white{
background-color: #fff;
}
:root{
--color01: #0081cc;
--color02: #e5f2fa;
--color03: #cbe6e0;
--color04: #edf6f4;
--color05: #f6efe9;
}
/* 頻出背景 */
.bg_color01{
background-color: var(--color01);
--bg_color: var(--color01);
}
.bg_color02{
background-color: var(--color02);
--bg_color: var(--color02);
}
.bg_color03{
background-color: var(--color03);
--bg_color: var(--color03);
}
.bg_color04{
background-color: var(--color04);
--bg_color: var(--color04);
}
.bg_color05{
background-color: var(--color05);
--bg_color: var(--color05);
}
/* 頻出文字色 */
.text_color01{color: var(--color01);}
.text_color02{color: var(--color02);}
.text_color03{color: var(--color03);}
.text_color04{color: var(--color04);}
.text_color05{color: var(--color05);}
/* btn */
.btn_link_normal{
font-size: var(--text24);
background-color: var(--btn_bg,#cb3e4c);
max-width: 350px;
padding: 1em 1em;
display: flex;
justify-content: center;
align-items: center;
column-gap: 5px;
color: #fff;
border-radius: 100vmax;
position: relative;
letter-spacing: 1px;
}
.btn_link_normal.btn_center{
margin-inline: auto;
}
.btn_link_normal::before,
.btn_link_normal::after{
content: "";
display: inline-block;
background-color: currentColor;
}
.btn_link_normal::after{
aspect-ratio: var(--arrow_tate);
-webkit-mask: var(--arrow_down);
mask:var(--arrow_down);
width: 16px ;
position: absolute;
right: 1em;
top: 50%;
translate: 0 -50%;
}
.btn_link_normal::before{
aspect-ratio: 1/1;
mask:var(--mail_icon);
width: 23px ;
}
/* grid,flex */
.flexbox{
display: flex;
}
@media screen and (max-width: 599px) {
.flexbox{
flex-direction: column;
row-gap: 30px;
}
}
.al_center{
align-items: center;
}
.al_end{
align-items: flex-end;
}
.al_s_end{
align-self: flex-end;
}
.jsc_sb{
justify-content: space-between;
}
.jsc_center{
justify-content: center;
}
.grid_two_auto,
.grid_two,
.grid_three,
.grid_four{
display: grid;
column-gap: 3.5%;
row-gap: 30px;
}
.grid_two_auto{
grid-template-columns: repeat(2,auto);
}
.grid_two{
grid-template-columns: repeat(2,1fr);
}
.grid_three{
grid-template-columns: repeat(3,1fr);
}
.grid_four{
grid-template-columns: repeat(4,1fr);
}
@media screen and (max-width: 599px) {
.grid_two_auto,
.grid_two,
.grid_three{
grid-template-columns: repeat(1,1fr);
}
.sp_grid_two,
.grid_four{
grid-template-columns: repeat(2,1fr);
}
.sp_grid_two.grid_two_auto{
grid-template-columns: repeat(2,auto);
}
}
.flex_two{
display: flex;
justify-content: space-between;
}
.reverse{
flex-direction: row-reverse;
}
.flex_two > div{
width: 47.5%;
}
.c_gap_1{
column-gap: 1%;
}
.c_gap_3{
column-gap: 3%;
}
.c_gap_5{
column-gap: 5%;
}
.c_gap_7{
column-gap: 7%;
}
.c_gap_10{
column-gap: 10%;
}
.row_gap_60{
row-gap: 60px;
}
.row_gap_100{
row-gap: 100px;
}
@media screen and (max-width: 599px) {
.flex_two,
.reverse{
flex-direction: column;
row-gap: 30px;
}
.flex_two > div{
width: 100%;
}
.sp_dis_contents{
display: contents;
}
.row_gap_100{
row-gap: 50px;
}
.sp_row_gap_30{
row-gap: 30px;
}
.sp_row_gap_0{
row-gap: 0;
}
}
.sp_archive_link_layout{
display: flex;
flex-direction: column-reverse;
position: relative;
}
@media screen and (max-width: 599px) {
.sp_archive_link_layout{
display: flex;
justify-content: space-between;
flex-direction: row-reverse;
}
.sp_archive_link_layout_text{
width: 55%;
}
.sp_archive_link_layout_img{
width: 42%;
}
}
.flex_item590{
width: calc(590 / var(--inner_frame_w,1160) * 100%);
}
.flex_item580{
width: calc(580 / var(--inner_frame_w,1160) * 100%);
}
.flex_item565{
width: calc(565 / var(--inner_frame_w,1160) * 100%);
}
.flex_item550{
width: calc(550 / var(--inner_frame_w,1160) * 100%);
}
.flex_item470{
width: calc(470 / var(--inner_frame_w,1160) * 100%);
}
.flex_item400{
width: calc(400 / var(--inner_frame_w,1160) * 100%);
}
.flex_item410{
width: calc(410 / var(--inner_frame_w,1160) * 100%);
}
.flex_item440{
width: calc(440 / var(--inner_frame_w,1160) * 100%);
}
.flex_item350{
width: calc(350 / var(--inner_frame_w,1160) * 100%);
}
.flex_item310{
width: calc(310 / var(--inner_frame_w,1160) * 100%);
}
.flex_item270{
width: calc(270 / var(--inner_frame_w,1160) * 100%);
}
.flex_item500{
width: calc(500 / var(--inner_frame_w,1160) * 100%);
}
.flex_item540{
width: calc(540 / var(--inner_frame_w,1160) * 100%);
}
@media screen and (max-width: 599px) {
.flex_item565,
.flex_item590,
.flex_item580,
.flex_item400,
.flex_item470,
.flex_item540,
.flex_item500,
.flex_item440,
.flex_item410,
.flex_item350,
.flex_item310{
width: 100%;
}
}
.over_item_box745{
width: calc(745 / 1350 * 100vw);
max-width: 745px;
}
.over_item_box745[data-item_position="left"]{
margin-left: clamp(-155px, calc((100vw - (var(--inner_frame_w,1050) * 1px)) / -2) , -20px);
}
.over_item_box655{
width: calc(655 / 1350 * 100vw);
max-width: 655px;
}
.over_item_box655[data-item_position="left"]{
margin-left: clamp(-155px, calc((100vw - (var(--inner_frame_w,1050) * 1px)) / -2) , -20px);
}
.over_item_box650{
width: calc(650 / 1350 * 100vw);
max-width: 650px;
}
.over_item_box650[data-item_position="left"]{
margin-left: clamp(-155px, calc((100vw - (var(--inner_frame_w,1050) * 1px)) / -2) , -20px);
}
@media screen and (max-width: 599px) {
.over_item_box650,
.over_item_box650[data-item_position="left"],
.over_item_box745,
.over_item_box745[data-item_position="left"],
.over_item_box655,
.over_item_box655[data-item_position="left"]{
width: 100%;
margin-left: 0;
}
}
.bg_img{
background-image: url(../images/bg.jpg);
}
.concept_frame{
border: 1px solid var(--color01);
border-radius: 10px;
padding: 5% calc(104 / 1160 * 100%);
}
@media screen and (max-width: 599px) {
.concept_frame{
padding: 50px 5%;
}
}
/* plan */
.plan_intro_bg{
background-color: var(--color03);
background-image: url(../images/plan_intro_bg.jpg);
background-position: center;
background-repeat: no-repeat;
}
.plan_text_deco{
left: calc(0% - 75px);
top: 50%;
translate: 0 -50%;
width: auto;
height: 80%;
}
@media screen and (max-width: 1059px) {
.inner_none{
display: none;
}
}
.plan_inner{
padding: calc(80 / 1160 * 100%) calc(100 / 1160 * 100%);
}
.reserve_bg{
background-image: url(../images/contact_frame_bg.jpg);
background-position: center;
background-size: cover;
padding-top: 5%;
padding-bottom: 10%;
}
.reserve_frame{
max-width: 500px;
width: 80%;
padding: 5% 0%;
background-color: rgb(255 255 255/ 0.8);
margin-inline: auto;
}
@media screen and (max-width: 599px) {
.reserve_frame{
padding: 5% 3.5%;
}
}
/* charm */
.charm_frame{
border: 1px solid #000;
width: 92.5%;
}
.charm_intro_img{
margin-top: -28%;
}
.charm_list{
display: grid;
grid-template-columns: repeat(3,1fr);
}
@media screen and (max-width: 599px) {
.charm_list{
display: grid;
grid-template-columns: repeat(2,1fr);
}
}
.charm_list > li{
padding: 10% 9%;
position: relative;
}
@media screen and (min-width: 600px) {
.charm_list > li:not(:nth-of-type(3n))::after{
content: "";
width: 1px;
height: 90%;
position: absolute;
right: 0;
top: 5%;
background-color: #000;
}
}
.charm_list > li:nth-of-type(1)::before,
.charm_list > li:nth-of-type(2)::before,
.charm_list > li:nth-of-type(3)::before{
content: "";
height: 1px;
position: absolute;
bottom: 0%;
background-color: #000;
}
.charm_list > li:nth-of-type(1)::before{
left: 0%;
width: 92.5%;
}
.charm_list > li:nth-of-type(2)::before{
left: 5%;
width: 90%;
}
.charm_list > li:nth-of-type(3)::before{
right: 0%;
width: 92.5%;
}
@media screen and (max-width: 599px) {
.charm_list > li:not(:nth-of-type(2n))::after{
content: "";
width: 1px;
height: 90%;
position: absolute;
right: 0;
top: 5%;
background-color: #000;
}
.charm_list > li:nth-of-type(4)::before{
content: "";
height: 1px;
position: absolute;
bottom: 0%;
background-color: #000;
}
.charm_list > li:nth-of-type(1)::before,
.charm_list > li:nth-of-type(4)::before,
.charm_list > li:nth-of-type(3)::before{
right: auto;
left: 5%;
width: 90%;
}
}
/* location */
.location_text_deco{
left: calc(0% - 75px);
top: 50%;
translate: 0 -50%;
width: auto;
height: 80%;
}
.location_intro_bg{
background-color: var(--color05);
background-image: url(../images/location_intro_bg.jpg);
background-position: center;
background-repeat: no-repeat;
}
.location_list{
border-top: 1px solid #000;
}
.location_list > div{
display: flex;
justify-content: space-between;
border-bottom: 1px solid #000;
}
@media screen and (max-width: 599px) {
.location_list > div{
flex-direction: column;
}
}
.location_list dt,
.location_list dd{
padding: 1em 0.5em;
}
/* about */
.about_layout_frame{
display: grid;
grid-template-columns: 1fr 2fr;
justify-content: space-between;
row-gap: 20px;
column-gap: 5%;
}
.about_layout_frame > div:nth-of-type(1){
min-width: clamp(290px,40vw,350px);
}
.about_layout_frame > div:nth-of-type(2){
text-align: right;
}
.about_layout_frame > div:nth-of-type(3){
padding-top: 70px;
}
.about_layout_frame > div:nth-of-type(4){
width: fit-content;
margin-inline: auto;
}
@media screen and (min-width: 1200px) {
.about_layout_frame > div:nth-of-type(1),
.about_layout_frame > div:nth-of-type(3){
padding-left: 2em;
box-sizing: content-box;
}
}
@media screen and (max-width: 599px) {
.about_layout_frame{
grid-template-columns: 1fr;
justify-content: space-between;
grid-template-areas:
"item02"
"item01"
"item03"
"item04";
}
.about_layout_frame > div:nth-of-type(1){
grid-area: item01;
}
.about_layout_frame > div:nth-of-type(2){
grid-area: item02;
}
.about_layout_frame > div:nth-of-type(3){
grid-area: item03;
padding-top: 0;
}
.about_layout_frame > div:nth-of-type(4){
grid-area: item04;
}
}
.about_bg01::before,
.about_bg02::before{
content: "";
background-color: var(--color02);
position: absolute;
z-index: -1;
width: calc((760 / 1160) * 100%);
}
.about_bg01::before{
aspect-ratio: 760 / 810;
top: 20%;
left: 50%;
translate: -50% 0;
}
.about_bg02::before{
aspect-ratio: 760 / 900;
top: 50%;
left: 0%;
translate: -12.5% -55%;
}
.about_img_frame{
display: flex;
column-gap: calc((84 / 675) * 100%);
justify-content: space-between;
width: calc((675 / 1160) * 100%);
margin-left: auto;
margin-right: max(-95px,calc(-50vw + 50%));
}
.about_img_frame > figure:first-of-type{
align-self: flex-end;
}
@media screen and (max-width: 599px) {
.about_img_frame{
width: 100%;
margin-right: 0;
}
}
.about_intro_img02{
left: -2%;
top: 4%;
width: calc((180 / 1200) * 100%);
}
/* contact */
.form_frame{
border-radius: 30px;
background-color: #fff;
}
/* footer */
.foot_logo img{
max-width: 398px;
}
.foot_frame{
display: flex;
justify-content: space-between;
align-items: center;
}
@media screen and (max-width: 599px) {
.foot_frame{
flex-direction: column;
row-gap: 30px;
}
}
.foot_link_list{
column-count: 2;
text-transform: uppercase;
}
.foot_link_list a{
display: inline-block;
font-size: var(--text18);
padding: 0.75em 0.5em;
position: relative;
}
.foot_link_list a::before{
content: "";
background-color: currentColor;
width: calc(100% - 1em);
height: 2px;
position: absolute;
bottom: 0;
left: 0.5em;
scale: 0;
transition: scale 0.4s ease-in-out;
transform-origin: 0;
}
.foot_link_list a:hover::before{
scale: 1;
}
.foot_official_link_btn{
display: grid;
column-gap: 5px;
grid-template-columns: auto auto;
justify-content: center;
align-items: center;
border-radius: 100vmax;
border: 2px solid #000;
font-size: var(--text24);
padding: 0.7em 1em;
max-width: 350px;
}
.foot_official_link_btn::before{
content: "";
background-color: currentColor;
mask: var(--official_icon);
aspect-ratio: 36/32;
width: 36px;
}
@media screen and (max-width: 599px) {
.flow_loop img{
width: 200%;
margin-left: -50%;
}
}
.section_space::before{
content: "";
padding-top: var(--h_height);
margin-top: calc(var(--h_height) * -1);
}