/*
Last Updated: 2025-07-30
Author: zeal
Theme Name: nishinoyama
*/
*{
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(2rem,2.9375vw,2.6rem);
--text28: clamp(2rem,3vw,2.8rem);
--text30: clamp(2.5rem,3.4375vw,3.0rem);
--text33: clamp(2.7rem,3.75vw,3.3rem);
--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;
--transition_normal: 0.4s ease-in-out;
--f_barlow: "Barlow Semi Condensed", sans-serif;
--f_zenkaku: "Zen Kaku Gothic New", sans-serif;
--arrow_yoko: 42 / 77;
--arrow_tate: 77 / 42;
--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;
--bg_plaid:linear-gradient(0deg, transparent calc(100% - 1px), #f4f4f4 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f4f4f4 calc(100% - 1px));
--icon_outline:url( 'data:image/svg+xml;utf-8,' );
--icon_access:url( 'data:image/svg+xml;utf-8,' );
--icon_view:url( 'data:image/svg+xml;utf-8,');
--icon_link:url( 'data:image/svg+xml;utf-8,');
}
/*----------------------------------------
全体
----------------------------------------*/
html{
font-family:'游ゴシック体', 'Yu Gothic', YuGothic,'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ ゴシック',sans-serif;
font-size:62.5%;
color: #332f2a;
-webkit-text-size-adjust:100%;
line-height:1.5;
}
body{ font-size:1.4rem; font-size: 1.4em; }
p{
/* color:#332f2a; */
/* font-feature-settings: "palt"; */
line-height: 2;
}
img{
vertical-align: bottom;
backface-visibility: hidden;
height: auto;
}
a{
color: inherit;
transition: all 0.3s;
text-decoration: none;
}
.op:hover{ opacity: 0.4; }
.op img{ transition: all 0.3s; }
#container{ overflow: hidden; }
.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_r_auto{
margin-right: auto;
}
.max_330{
max-width: 330px;
--inner_frame_w: 330;
}
.max_430{
max-width: 430px;
--inner_frame_w: 430;
}
.max_500{
max-width: 500px;
--inner_frame_w: 500;
}
.max_680{
max-width: 680px;
--inner_frame_w: 680;
}
.max_700{
max-width: 700px;
--inner_frame_w: 700;
}
.max_760{
max-width: 760px;
--inner_frame_w: 760;
}
.max_860{
max-width: 860px;
--inner_frame_w: 860;
}
.p_box_50{
padding: calc(50 / 1040 * 100%);
}
@media screen and (max-width: 599px) {
.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;
}
.sp_m_center{
margin-inline: auto;
}
}/*END*/
.f_barlow{
font-family: var(--f_barlow);
font-weight: 300;
}
.f_zenkaku{
font-family: var(--f_zenkaku);
font-weight: 400;
}
.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;
}
/*----------------------------------------
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_28{ font-size: var(--text28) }
.text_30{ font-size: var(--text30) }
.text_33{ font-size: var(--text33) }
.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 !important; }
.lh_32{ line-height: 3.2 !important; }
.lh_30{ line-height: 3 !important; }
.lh_28{ line-height: 2.8 !important; }
.lh_26{ line-height: 2.6 !important; }
.lh_24{ line-height: 2.4 !important; }
.lh_22{ line-height: 2.2 !important; }
.lh_20{ line-height: 2 !important; }
.lh_18{ line-height: 1.8 !important; }
.lh_16{ line-height: 1.6 !important; }
.lh_15{ line-height: 1.5 !important; }
.lh_14{ line-height: 1.4 !important; }
.lh_12{ line-height: 1.2 !important; }
.lh_11{ line-height: 1.1 !important; }
.lh_10{ line-height: 1 !important; }
.ls_1{ letter-spacing: 1px !important; }
.ls_2{ letter-spacing: 2px !important; }
.ls_3{ letter-spacing: 3px !important; }
.ls_4{ letter-spacing: 4px !important; }
.ls_50{letter-spacing: calc(0.001em * 50);}
.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);}
.ls_-1{ letter-spacing: -1px !important; }
.ls_-2{ letter-spacing: -2px !important; }
.ls_-3{ letter-spacing: -3px !important; }
.ls_-4{ letter-spacing: -4px !important; }
@media screen and (max-width: 599px){
.sp_lh_15{
line-height: 1.5!important;
}
p{ line-height: 1.8; }
}/*END*/
/*----------------------------------------
layout
----------------------------------------*/
.large_frame {
width: 100%;
max-width: 1190px;
padding-inline: 20px;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
}
.outline_frame{
width: 100%;
max-width: 1350px;
margin-left: auto;
margin-right: auto;
}
.inner_frame{
width: 100%;
max-width: 1080px;
padding-inline: 20px;
box-sizing: border-box;
margin-right: auto;
margin-left: auto;
--inner_frame_w: 1040;
}
.inner_frame_post{
width: 100%;
max-width:750px;
position: relative;
box-sizing: border-box;
margin:0 auto;
padding-right: 20px;
padding-left: 20px;
--inner_frame_w: 750;
}
@media screen and (max-width: 1250px) {
.large_frame {
box-sizing: border-box;
padding-left: 3.7%;
padding-right: 3.7%;
}
}/*END*/
@media screen and (max-width: 820px){
.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: 5%;
padding-left: 5%;
}
}/*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対策*/
.photo_frame{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
aspect-ratio: 200 / 240;
}
.photo_frame img{
width: 100%;
height: 100% !important;
object-fit: cover;
}
.hover_zoom img{
transition: var(--transition_normal);
}
.hover_zoom:hover img{
scale: 1.1;
}
.photo_frame{ z-index: 1; }/*chrome*/
/*----------------------------------------
header
----------------------------------------*/
:root{
--link_hover_color: var(--color02);
}
body.open{
overflow: hidden;
}
.head_logo{
min-width: 250px;
max-width: 424px;
width: 30%;
}
.head_inner{
padding: min(30px, 5%) 3.5%;
display: flex;
justify-content: space-between;
}
.head_rt_upper_list{
display: flex;
align-items: center;
gap: 1em;
}
.head_rt_bottom_list{
display: flex;
justify-content: flex-end;
}
.head_rt_bottom_list a{
position: relative;
display: inline-block;
padding: 1.5em 1.25em;
}
.head_rt_bottom_list a::after{
content: "";
display: inline-block;
width: 0%;
height: 2px;
background-color: currentColor;
position: absolute;
left: 0;
bottom: 0;
transition: width var(--transition_normal), background-color var(--transition_normal);
}
.head_rt_bottom_list a:hover::after{
width: 100%;
}
.head_rt_bottom_list a:hover{
color: var(--link_hover_color);
}
.head_link_icon{
display: grid;
align-items: center;
grid-template-columns: auto 1fr;
column-gap: 5px;
}
.head_link_icon:hover{
color: var(--link_hover_color);
}
.head_link_icon::before{
content: "";
background-color: currentColor;
display: inline-block;
width: 20px;
aspect-ratio: 1;
mask-image: var(--head_link_icon);
mask-position: center;
mask-repeat: no-repeat;
}
.head_link_icon[data-icon_type="access"]{
--head_link_icon: var(--icon_access);
}
.head_link_icon[data-icon_type="outline"]{
--head_link_icon: var(--icon_outline);
}
@media screen and (min-width: 1000px) {
.menu_box{
display: none;
}
}
@media screen and (max-width: 999px){
.head_rt_upper_list,
.head_rt_bottom_list{
flex-direction: column;
color: #fff;
}
.head_rt_upper_list a,
.head_rt_bottom_list a{
padding: 1em 0;
display: inline-block;
}
.menu_box{
width: 50px;
aspect-ratio: 1;
}
.menu_btn{
background: none;
position: fixed;
border: none;
width: 50px;
aspect-ratio: 1;
cursor: pointer;
z-index: 9999;
}
.menu_btn span{
display: inline-block;
width: 80%;
height: 1px;
background-color: #000;
position: absolute;
left: 10%;
transition: all 0.6s;
}
.menu_btn span:nth-child(1){
top: 25%;
}
.menu_btn span:nth-child(2){
top: 50%;
}
.menu_btn span:nth-child(3){
top: 75%;
}
.open .menu_btn span:nth-child(1){
transform: rotate(-45deg);
top: 50%;
background-color: #fff;
}
.open .menu_btn span:nth-child(2){
opacity: 0;
}
.open .menu_btn span:nth-child(3){
transform: rotate(45deg);
top: 50%;
background-color: #fff;
}
.head_rt_box{
position: fixed;
background: #404040;
top: -100%;
right: 0;
z-index: 99;
width: 100%;
height: 100vh;
overflow-y: scroll;
opacity: 0;
visibility: hidden;
display: flex;
flex-direction: column-reverse;
align-items: center;
justify-content: center;
text-align: center;
transition: var(--transition_normal);
}
.head_rt_box nav{
display: flex;
margin-left: auto;
margin-right: auto;
flex-wrap: wrap;
flex-direction: column;
}
.open .head_rt_box{
top: 0%;
opacity: 1;
translate: 0 0%;
visibility: visible;
}
}
/*END*/
/*----------------------------------------
contents concept
----------------------------------------*/
/* ぱんくず */
.pan_nav{
font-size: var(--text16);
}
.pan_nav li{
display: inline-block;
}
.pan_nav li a:after{
content: ">";
position: relative;
font-size: 1.3rem;
margin-right: 5px;
margin-left: 6px;
}
/* 共通 */
.top_line{
border-top: #332f2a 1px solid;
}
.under_line{
border-bottom: 1px solid #332f2a;
}
.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, #332f2a 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;
}
.bg_black{
background-color: #332f2a;
}
.text_white{
color: #fff;
}
:root{
--color01: #eeece9;
--color02: #7ea545;
}
/* 頻出背景 */
.bg_color01{background-color: var(--color01);}
.bg_color02{background-color: var(--color02);}
.bg_color03{background-color: var(--color03);}
.bg_color04{background-color: var(--color04);}
.bg_color05{background-color: var(--color05);}
.bg_color06{background-color: var(--color06);}
/* 頻出文字色 */
.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);}
.text_color06{color: var(--color06);}
/* btn */
.btn_link_normal{
font-size: var(--text16);
background-color: var(--btn_bg);
max-width: 320px;
padding: 1.5em 1em;
display: grid;
justify-content: space-between;
align-items: center;
}
.btn_link_normal::after{
content: "";
aspect-ratio: var(--arrow_tate);
-webkit-mask: var(--arrow_down);
mask:var(--arrow_down);
display: inline-block;
width: 16px ;
}
.link_more{
display: flex;
column-gap: 10px;
}
.link_more::after{
content: "";
mask-image: var(--icon_view);
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
aspect-ratio: 32/13;
width: 32px;
background-color: currentColor;
transition: var(--transition_normal);
}
.link_more:hover::after{
translate: 10px 0;
}
@media screen and (max-width: 599px) {
.link_more{
justify-content: center;
}
}
/* hover_list */
.list_hover_effect:hover a:not(a:hover){
filter: opacity(0.3);
}
.link_none{
pointer-events: none;
display: block;
}
/* grid,flex */
.dis_flex{
display: flex;
}
.flexbox{
display: flex;
}
@media screen and (max-width: 599px) {
.flexbox{
flex-direction: column;
row-gap: 30px;
}
}
.flex_wrap{
flex-wrap: wrap;
}
.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_three{
grid-template-columns: repeat(3,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%;
}
@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;
}
}
.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%;
}
}
.c_gap_0{
column-gap: 0%;
}
.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_0{
row-gap: 0px;
}
.row_gap_60{
row-gap: 60px;
}
.row_gap_100{
row-gap: 100px;
}
.gap_0{
gap: 0px;
}
.gap_5{
gap: 5px;
}
.gap_10{
gap: 10px;
}
@media screen and (max-width: 599px) {
.row_gap_100{
row-gap: 50px;
}
.sp_row_gap_150{
row-gap: 150px;
}
.sp_row_gap_100{
row-gap: 100px;
}
.sp_row_gap_30{
row-gap: 30px;
}
.sp_row_gap_0{
row-gap: 0;
}
}
.flex_item300{
width: calc(300 / var(--inner_frame_w,1040) * 100%);
}
.flex_item310{
width: calc(310 / var(--inner_frame_w,1040) * 100%);
}
.flex_item350{
width: calc(350 / var(--inner_frame_w,1040) * 100%);
}
.flex_item380{
width: calc(380 / var(--inner_frame_w,1040) * 100%);
}
.flex_item400{
width: calc(400 / var(--inner_frame_w,1040) * 100%);
}
.flex_item410{
width: calc(410 / var(--inner_frame_w,1040) * 100%);
}
.flex_item430{
width: calc(430 / var(--inner_frame_w,1040) * 100%);
}
.flex_item450{
width: calc(450 / var(--inner_frame_w,1040) * 100%);
}
.flex_item480{
width: calc(480 / var(--inner_frame_w,1040) * 100%);
}
.flex_item500{
width: calc(500 / var(--inner_frame_w,1040) * 100%);
}
.flex_item520{
width: calc(520 / var(--inner_frame_w,1040) * 100%);
}
.flex_item530{
width: calc(530 / var(--inner_frame_w,1040) * 100%);
}
.flex_item540{
width: calc(540 / var(--inner_frame_w,1040) * 100%);
}
.flex_item550{
width: calc(550 / var(--inner_frame_w,1040) * 100%);
}
.flex_item565{
width: calc(565 / var(--inner_frame_w,1040) * 100%);
}
.flex_item580{
width: calc(580 / var(--inner_frame_w,1040) * 100%);
}
.flex_item590{
width: calc(590 / var(--inner_frame_w,1040) * 100%);
}
.flex_item610{
width: calc(610 / var(--inner_frame_w,1040) * 100%);
}
.flex_item620{
width: calc(620 / var(--inner_frame_w,1040) * 100%);
}
.flex_item650{
width: calc(650 / var(--inner_frame_w,1040) * 100%);
}
@media screen and (max-width: 599px) {
.flex_item650,
.flex_item620,
.flex_item610,
.flex_item590,
.flex_item580,
.flex_item565,
.flex_item550,
.flex_item540,
.flex_item530,
.flex_item520,
.flex_item500,
.flex_item480,
.flex_item450,
.flex_item430,
.flex_item410,
.flex_item400,
.flex_item380,
.flex_item350,
.flex_item310,
.flex_item300{
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,1040) * 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,1040) * 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,1040) * 1px)) / -2) , -20px);
}
.over_item_box630{
width: calc(630 / 1350 * 100vw);
max-width: 630px;
}
.over_item_box630[data-item_position="left"]{
margin-left: clamp(-155px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , -20px);
}
.over_item_box565{
width: calc(565 / 1350 * 100vw);
max-width: 565px;
}
.over_item_box565[data-item_position="left"]{
margin-left: clamp(-155px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , -20px);
}
.over_item_box530{
width: calc(530 / 1350 * 100vw);
max-width: 530px;
}
.over_item_box530[data-item_position="left"]{
margin-left: clamp(-155px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , -20px);
}
@media screen and (max-width: 599px) {
.over_item_box565,
.over_item_box565[data-item_position="left"],
.over_item_box530,
.over_item_box530[data-item_position="left"],
.over_item_box650,
.over_item_box650[data-item_position="left"],
.over_item_box630,
.over_item_box630[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;
}
}
/* mv */
.mv_text_box{
width: calc(550 / 1040 * 100%);
margin-left: clamp(-50px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , 0px);
}
.mv_img_box{
width: calc(620 / 1040 * 100%);
margin-right: clamp(-155px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , -20px);
}
@media screen and (max-width: 599px) {
.mv_text_box,
.mv_img_box{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
.mv_point_list{
display: grid;
grid-template-columns: repeat(3,1fr);
}
.point_list_line > li{
position: relative;
}
.point_list_line > li::after,
.point_list_line > li::before{
content: "";
width: 90%;
background-color: currentColor;
height: 1px;
position: absolute;
}
.point_list_line > li::before{
top: 0;
}
.point_list_line > li::after{
bottom: 0;
}
.point_list_line > li:nth-of-type(1)::after,
.point_list_line > li:nth-of-type(1):before{
left: 0;
}
.point_list_line > li:nth-of-type(2)::after,
.point_list_line > li:nth-of-type(2):before{
width: 80%;
left: 50%;
translate: -50% 0;
}
.point_list_line > li:nth-of-type(3)::after,
.point_list_line > li:nth-of-type(3):before{
right: 0;
}
.point_list_separator{
position: absolute;
top: 50%;
translate: 0 -50%;
background-color: currentColor;
width: 1px;
height: 85%;
}
.point_list_separator[data-separator_postition="right"]{
right: 0;
}
.point_list_separator[data-separator_postition="left"]{
left: 0;
}
/* intro */
.top_intro_deco_text{
writing-mode: vertical-lr;
right: 0;
top: 0;
margin-right: clamp(-100px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , 0px);
}
@media screen and (max-width: 1039px) {
.top_intro_deco_text{
display: none;
}
}
.intro_text_box{
width: calc(480 / 1040 * 100%);
margin-right: clamp(-30px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , 0px);
}
.intro_img_box{
width: calc(588 / 1040 * 100%);
margin-left: clamp(-105px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , -20px);
}
@media screen and (max-width: 599px) {
.intro_text_box,
.intro_img_box{
width: 100%;
margin-left: 0;
margin-right: 0;
}
}
.intro_copy{
width: fit-content;
background-color: #332f2a;
padding: 0.5em;
}
.intro_img02{
width: calc(411 / 588 * 100%);
margin-left: auto;
}
.intro_point_list{
display: grid;
grid-template-columns: repeat(3,1fr);
}
.intro_point_list > li{
padding: 6% 11%;
}
@media screen and (max-width: 599px) {
.intro_point_list{
grid-template-columns: repeat(1,1fr);
}
.point_list_line.intro_point_list > li:nth-of-type(1)::after,
.point_list_line.intro_point_list > li:nth-of-type(2)::after{
display: none;
}
.point_list_line.intro_point_list > li:nth-of-type(3)::after{
left: 50%;
translate: -50% 0;
width: 85%;
}
.point_list_line.intro_point_list > li:nth-of-type(1):before,
.point_list_line.intro_point_list > li:nth-of-type(2):before,
.point_list_line.intro_point_list > li:nth-of-type(3):before{
width: 85%;
left: 50%;
translate: -50% 0;
}
}
.access_img02{
width: calc(358 / 530 * 100%);
margin-left: calc(105 / 530 * 100%);
}
/* guide */
.guide_bg{
background-image: url(../images/top/guide_bg.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
/* meetus */
.top_meetus_deco_text{
writing-mode: vertical-lr;
left: 0;
top: 0;
margin-left: clamp(-100px, calc((100vw - (var(--inner_frame_w,1040) * 1px)) / -2) , 0px);
}
@media screen and (max-width: 1039px) {
.top_meetus_deco_text{
display: none;
}
}
.meetus_bg{
width: 95%;
max-width: 1250px;
margin-inline: auto;
border-radius: 20px;
}
.meetus_point_list{
display: grid;
grid-template-columns: repeat(6,1fr);
grid-template-rows: repeat(2,1fr);
gap: 10px;
}
@media screen and (max-width: 599px) {
.meetus_point_list{
grid-template-columns: 1fr;
grid-template-rows: auto;
}
}
.meetus_point_list > li{
display: grid;
}
@media screen and (min-width: 600px) {
.meetus_point_list li:nth-of-type(1){
grid-area: area01;
}
.meetus_point_list li:nth-of-type(2){
grid-area: area02;
}
.meetus_point_list li:nth-of-type(3){
grid-area: area03;
}
.meetus_point_list li:nth-of-type(4){
grid-area: area04;
}
.meetus_point_list li:nth-of-type(5){
grid-area: area05;
}
.meetus_point_list.point_list01{
grid-template-areas:
"area01 area01 area02 area02 area03 area03"
". area04 area04 area05 area05 .";
}
.meetus_point_list.point_list02{
grid-template-areas:
". area01 area01 area02 area02 ."
". area03 area03 area04 area04 .";
}
}
.meetus_point_text_box{
border: 1px solid #000;
border-radius: 20px;
padding: calc(25 / 340 * 100%) calc(30 / 340 * 100%);
}
.meetus_pickup_deco01{
width: calc(147 / 1080 * 100%);
left: 15%;
top: 0%;
translate: 0 -75%;
}
.meetus_pickup_deco02{
width: calc(225 / 1080 * 100%);
right: 12%;
top: 0%;
translate: 0 -75%;
}
.meetus_pickup_deco03{
width: calc(223 / 1080 * 100%);
left: 7%;
top: 0%;
translate: 0 -35%;
}
.meetus_pickup_deco04{
width: calc(212 / 1080 * 100%);
right: 7%;
top: 0%;
translate: 0 -35%;
}
@media screen and (max-width: 599px) {
.meetus_pickup_deco01{
width: calc(147 / 800 * 100%);
left: 1%;
top: 0%;
translate: 0 -25%;
}
.meetus_pickup_deco02{
width: calc(225 / 800 * 100%);
right: 1%;
top: 0%;
translate: 0 -25%;
}
.meetus_pickup_deco03{
width: calc(223 / 800 * 100%);
left: -2%;
top: 0%;
translate: 0 -35%;
}
.meetus_pickup_deco04{
width: calc(212 / 800 * 100%);
right: -2%;
top: 0%;
translate: 0 -35%;
}
}
/* info */
.top_info a{
display: inline-block;
padding: 1em 0;
width: 100%;
}
/* footer */
.foot_under_line{
border-bottom: 1px solid #e5e5e5;
}
.foot_list{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.foot_list a{
font-size: var(--text16);
font-family: var(--f_zenkaku);
padding: 1em 0.5em;
display: inline-block;
}
@media screen and (max-width: 599px) {
.foot_list{
flex-direction: column;
align-items: center;
}
.foot_list li{
width: 100%;
}
.foot_list a{
border-top: 1px solid #e5e5e5;
width: 100%;
text-align: center;
}
}
.foot_under_list_frame{
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
}
@media screen and (max-width: 599px) {
.foot_under_list_frame{
grid-template-columns: 1fr;
}
}
.foot_under_list{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: fit-content;
margin-left: auto;
}
.foot_under_list ul{
display: flex;
align-items: center;
}
.foot_under_list a{
display: inline-block;
padding: 0.5em 1em;
}
.link_hover:hover{
color: var(--link_hover_color);
}
/* plan */
/*land_info*/
.land_info dl {
display: flex;
border: 3px solid #000;
}
.land_info dt {
padding: 15px 5px;
background: #000;
width: 23%;
display: flex;
justify-content: center;
align-items: flex-end;
}
.land_info dd {
width: 77%;
display: flex;
padding: 8px;
background-color: #fff;
}
.land_info dd > div{
width: 25%;
padding: 5px;
}
/* .land_info dd > div:not(:last-child){
border-right: dotted 1px #737373;
} */
.land_info dd > div.land_info_btn{
background: #7ea545;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: .4s;
}
.land_info dd > div.land_info_btn:hover {
opacity: 0.7;
}
.land_info dd div > p:first-child{
background-color: #d0ddbe;
}
@media screen and (max-width: 768px) {
.land_info dl {
flex-direction: column;
}
.land_info dd {
flex-direction: column;
width: 100%;
}
.land_info dt {
width: 100%;
}
.land_info dd > div{
width: 100%;
}
.land_info dd > div:not(.land_info_btn){
border-right: none;
}
}
.land_info_panel {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 800px;
max-width: 95%;
background-color: #fff;
border: 1px solid #000;
z-index: 101;
}
.land_info_panel .panel_scroll_area {
overflow: scroll;
max-height: calc(100vh - 120px);
-ms-overflow-style: none;
scrollbar-width: none;
}
.panel_scroll_area::-webkit-scrollbar{
display: none;
}
.land_info_panel.active{
display: block;
}
.land_info_panel_upper {
display: flex;
flex-wrap: wrap;
}
.land_info_panel_upper > div {
padding: 10px;
}
.land_info_panel_upper > div:first-child,
.land_info_panel_upper > div:nth-child(3) {
width: 40%;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
}
.land_info_panel_upper > div:nth-child(2),
.land_info_panel_upper > div:nth-child(4){
width: 60%;
border-bottom: 1px solid #000;
}
.land_info_panel_upper > div:first-child {
background-color: #737373;
color: #fff;
padding: 20px;
display: flex;
align-items: center;
}
.land_info_panel_upper > div:nth-child(4) {
display: flex;
align-items: end;
}
.land_info_panel_bottom {
padding: 10px;
}
.border_b {
border-bottom: 1px solid #ddd;
}
.over_bg.active {
position: fixed;
background-color: rgba(00,00,00,0.2);
width: 100%;
height: 100%;
z-index: 100;
display: block;
top: 0;
left: 0;
}
.land_info_panel .close_btn {
position: absolute;
top: 0%;
right: 0%;
transform: translate(0%, -100%);
padding: 10px;
box-sizing: border-box;
width: 60px;
cursor: pointer;
transition: .4s;
}
.land_info_panel .close_btn:hover {
opacity: 0.7;
}
@media screen and (max-width: 599px) {
.land_info_panel .close_btn {
width: 40px;
padding: 5px;
}
.land_info_panel_upper > div:first-child,
.land_info_panel_upper > div:nth-child(2),
.land_info_panel_upper > div:nth-child(3),
.land_info_panel_upper > div:nth-child(4){
width: 100%;
border-right: none;
}
}
/* access */
.location_copy{
display: flex;
column-gap: 10px;
align-items: center;
}
.location_list > div{
display: flex;
justify-content: space-between;
column-gap: 1em;
border-bottom: 1px solid #adadad;
}
.location_list dt,
.location_list dd{
font-size: var(--text16);
padding: 0.5em 0;
}
/* guide */
.guide_intro_img01{
mask-image: url(../images/guide/guide_intro_img01_mask.png);
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
}
.guide_intro_link{
display: grid;
grid-template-columns: repeat(3,1fr);
column-gap: calc(40 / 1040 * 100%);
}
@media screen and (max-width: 599px) {
.guide_intro_link{
grid-template-columns: repeat(4,1fr);
row-gap: 80px;
grid-template-areas:
"guide_intro_link01 guide_intro_link01 guide_intro_link02 guide_intro_link02"
". guide_intro_link03 guide_intro_link03 ."
;
}
.guide_intro_link li:nth-of-type(1){
grid-area: guide_intro_link01;
}
.guide_intro_link li:nth-of-type(2){
grid-area: guide_intro_link02;
}
.guide_intro_link li:nth-of-type(3){
grid-area: guide_intro_link03;
}
}
.guide_intro_link a{
display: inline-block;
position: relative;
}
.guide_intro_link a::after{
content: "";
width: 13px;
aspect-ratio: 13 / 63;
position: absolute;
top: calc(100% + 5px);
left: 50%;
translate: -50% 0;
background-color: currentColor;
mask-image: var(--icon_link);
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
@media screen and (max-width: 599px) {
.guide_intro_link a::after{
width: 8px;
}
}
/* design */
.design_plan_frame{
padding-left: 10%;
padding-right: 10%;
border: 1px solid;
border-radius: 20px;
}
@media screen and (max-width: 599px) {
.design_plan_frame{
padding-left: 5%;
padding-right: 5%;
}
}
/* plan */
.outline_list{
border-top: 1px solid#dbd9d6;
}
.outline_list > div{
border-bottom: 1px solid #dbd9d6;
display: grid;
grid-template-columns: 35% 1fr;
column-gap: 0.5em;
}
.outline_list dt,
.outline_list dd{
padding: 1em;
}
/* アニメーション */
.fade_in{
transition: opacity var(--transition_normal) var(--transition_d,0s), translate var(--transition_normal) var(--transition_d,0s);
opacity: 0;
translate: 0% 10px;
}
.anime_active .fade_in{
opacity: 1;
translate: 0% 0%;
}