@charset "UTF-8";
article, aside, figcaption, figure, footer, header, img, nav, section {
display:block
}
body, dd, div, dl, dt, h1, h2, h3, h4, html, img, li, ol, p, span, table, td, th, tr, ul, figure {
margin: 0;
padding: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
body {
font-size: 14px;
line-height: 2.2em;
font-family: "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-weight: 300;
background-color: #FFFFFF;
color: #333333;
letter-spacing: 0.05em;
-webkit-text-size-adjust: 100%;
text-align: justify;
text-justify: inter-ideograph;
}
h1, h2, h3 {
line-height: 1.8em;
}
h1, h2, h3, h4, h5 {
/*font-weight: bold;*/
}

@media screen and (max-width: 820px) {
body {
font-size: 12px;
}
h1, h2 {
line-height: 1.3em;
}
}
@media screen and (max-width: 767px) {
body {
font-size: 3.0vw;
line-height: 2.1em;
}
}
ol, ul {
list-style:none
}
table{
border-collapse: collapse;
border-spacing: 0;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
a {  }
a:link {
color: #333333;
text-decoration: none;
}
a:visited {
color: #333333;
text-decoration: none;
}
a:hover, a:active {
color: #333333;
text-decoration: none;
}
@media screen and (max-width: 767px) {
a:hover, a:active {
text-decoration: none;
}
}



/* ---------------------------------------------------------------- *
ドキュメント全体に関する設定
* ---------------------------------------------------------------- */
.contents_top {
/*overflow: hidden;*/
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
clear: both;
position: relative;
}
.contents {
overflow: hidden;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
clear: both;
position: relative;
}


/* 下層ページ */
.contents.P1_sub {
margin-top: 75px;
background-color: #F3F3F3;
}
/* 下層ページ */
.contents.P1_sub_wt {
margin-top: 75px;
background-color: #FFFFFF;
}
/* 下層ページ　スタッフブログ */
.contents.P1_sub_st {
margin-top: 75px;
background-color: #FFFFFF;
}
/* 下層ページ　施工事例 */
.contents.P1_sub.our_work {
background-color: #FFFFFF!important;
}
/* 下層お問い合わせフォーム関連 */
.contents.P1_sub_form {
background-color: #FFFFFF;
}
@media screen and (max-width: 767px) {
.contents {
}
/* 下層ページ */
.contents.P1_sub {
margin-top: 40px;
}
.contents.P1_sub_st {
margin-top: 40px;
}
}

.Box01{
width: 100%;
margin-top: 0px;
margin-bottom: 0px;
clear: both;
padding-top: 80px;
padding-bottom: 40px;
}
@media screen and (max-width: 767px) {
.Box01{
padding-top: 40px;
padding-bottom: 20px;
}
}

/* ------ Column ------ */
.row140,.row140in{
max-width: 1400px;
margin: 0 auto;
padding: 0 3%;
}
.row130,.row130in{
max-width: 1300px;
margin: 0 auto;
padding: 0 3%;
}
.row120,.row120in{
max-width: 1200px;
margin: 0 auto;
padding: 0 3%;
}
.row110,.row110in,.row110_6per{
max-width: 1100px;
margin: 0 auto;
padding: 0 3%;
}
.row,.row00{
max-width: 1000px;
margin: 0 auto;
padding: 0 3%;
}
.row:after,.row00:after,.row02:after {
content: "";
display: block;
clear: both;
}
.row02,.row02in {
max-width: 900px;
margin: 0 auto;
padding: 0 3%;
}
.row800,.row800in {
max-width: 800px;
margin: 0 auto;
padding: 0 3%;
}
.row700,.row700in {
max-width: 700px;
margin: 0 auto;
padding: 0 3%;
}

.pc_only {
display: block!important;
}
.sp_only {
display: none!important;
}
@media screen and (max-width: 767px) {
/* 左右に余白を設定 */
.row140,.row130,.row120,.row110,.row,.row02,.row800,.row700 {
padding: 0 8%;
}
.row110_6per {
padding: 0 6%;
}
.row140in,.row130in,.row120in,.row110in,.row00,.row02in,.row800in,.row700in {
padding-top: 0;
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0;
}
.pc_only {
display: none !important;
}
.sp_only {
display: block!important;
}
}


/*ホワイト*/
.wt .fa,.wt{
color: #FFF !important;
}
.wt a:link {
text-decoration: none !important;
color: #FFF !important;
}
.wt a:visited {
text-decoration: none !important;
color: #FFF !important;
}
.wt a:hover, .wt a:active {
text-decoration: none !important;
color: #FFF !important;
}

/*ブラック*/
.bk .fa,.bk{
color: #000000 !important;
}
.bk a:link {
text-decoration: none !important;
color: #000000 !important;
}
.bk a:visited {
text-decoration: none !important;
color: #000000 !important;
}
.bk a:hover, .bk a:active {
text-decoration: none !important;
color: #000000 !important;
}

/*コーポレートカラー*/
.corp .fa{
color: #AACC03 !important;
}
.corp a:link {
text-decoration: none !important;
color: #AACC03 !important;
}
.corp a:visited {
text-decoration: none !important;
color: #AACC03 !important;
}
.corp a:hover, .corp a:active {
text-decoration: none !important;
color: #AACC03 !important;
}

/*BGカラー*/
.bg_corp{
background-color: #AACC03;
}
.bg_wt{
background-color: #FFFFFF;
}
.bg_bk{
background-color: #000000;
}

/* ---------------------------------------------------------------- *
ヘッダ部分の設定
* ---------------------------------------------------------------- */
#header{
position: fixed;
width: 100%;
top: 0;
left: 0;
z-index: 4;
margin: 0;
height: 75px;
transition: all 0.3s;
/*background-color: rgba(0,0,0,0.10);*/
}
.in_head {
display: flex;
width: 100%;
transition: all 0.3s;
padding-top: 25px;
margin: 0;
}
.in_head h1 img {
height: 45px;
width: auto;
display: block;
margin-left: 70px;
transition: all 0.3s;
z-index: 1;
position: absolute;
}

/*minimumヘッド*/
#header.minimum {
background-color: rgba(255,255,255,1);
}
#header.minimum .in_head {
padding-top: 18px;
}
#header.minimum .in_head h1 img {
height: 40px;
}
/*.in_head.minimum {
padding-top: 18px;
}
.in_head.minimum h1 img {
height: 40px;
}*/

/*下層ページ*/
#header.P1_sub{
background-color: #FFFFFF;
}
#header.P1_sub .in_head {
padding-top: 18px;
}
#header.P1_sub .in_head h1 img {
height: 40px;
}

@media screen and (max-width: 820px) {
.in_head h1 img {
margin-left: 5%;
}
}
@media screen and (max-width: 767px) {
#header {
height: 60px;
}
.in_head {
padding-top: 10px;
}
.in_head h1 img {
height: 35px;
margin-left: 5%;
}
/*minimumヘッドナビ*/
#header.minimum .in_head {
padding-top: 10px;
}
#header.minimum .in_head h1 img {
height: 35px;
}
/*.in_head.minimum {
padding-top: 10px;
}
.in_head.minimum h1 img {
height: 35px;
}*/


/*下層ページ*/
#header.P1_sub{

}
#header.P1_sub .in_head {
padding-top: 10px;
}
#header.P1_sub .in_head h1 img {
height: 35px;
margin-left: 5%;
}
}


/* ---------------------------------------------------------------- *
swiper 設定
* ---------------------------------------------------------------- */
.t_mv {
position: relative;
_zoom: 1;
overflow: hidden;
margin: 0;
padding: 0;
}

.swiper-container {
width: 100%;
}
@media screen and (max-width: 767px) {
.swiper-container {
/*height: 100vh;*/
}
}
.swiper-slide {
height: auto;
}

.swiper-slide img {
width: 100%;
height: auto;
display: block;
}

.progressbar{
position: relative;
width: 360px;
height: 2px;
margin-top: 30px;
background: #EBEBEB;
overflow: hidden;
z-index: 1;
}
.progressbar span{
display: inline-block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
transform-origin: left center;;
background: #222222;
transform: scaleX(0);
transition-timing-function: linear;
}
@media screen and (max-width: 767px) {
.progressbar{
width: 40%;
margin-top: 20px;
}
}



.t_mv .c_copy {
position: absolute;
top: 150px;
left: 50%;
transform: translateX(-20%);
z-index: 2;
color: #FFFFFF;
}
.t_mv .c_copy h2 {
font-family: "stolzl", sans-serif;
font-optical-sizing: auto;
font-weight: 100;
font-style: normal;
font-size: 50px;
line-height: 2; 
}
.t_mv .c_copy h2 span {
font-size: 30px;
margin-left: 10px;
margin-right: 10px;
vertical-align: middle;
display: inline-block;
line-height: 2;
transform: translateY(-5px); /* 垂直位置を微調整 */
}
.t_mv .c_copy p {

}
@media screen and (max-width: 820px) {
.t_mv .c_copy {
top: 100px;
left: 40%;
transform: translateX(0%);
}
.t_mv .c_copy h2 {
font-size: 40px;
}
}
@media screen and (max-width: 767px) {
.t_mv .c_copy {
top: 100px;
left: 33%;
text-shadow: 0px 0px 6px rgba(0,0,0,0.65)
}
.t_mv .c_copy h2 {
font-size: 40px;
line-height: 1.0em;
margin-bottom: 30px;
}
.t_mv .c_copy h2 span {
font-size: 18px;
}
.t_mv .c_copy h2 span {
font-size: 30px;
}
.t_mv .c_copy p {
font-size: 3vw;
}
}




/*オープンハウス　バナー*/
.oh_bnr_opt1 {
width: 330px;
}
.oh_bnr_opt1 ul.in_desc {
display: grid;
gap: 0px;
grid-template-columns: 1fr 1fr;
border-radius: 15px;
background-color: #333333;
border: 1px solid #333333;
-webkit-box-shadow: 0 1px 10px 0 rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 10px 0 rgba(0,0,0,0.2);
box-shadow: 0 1px 10px 0 rgba(0,0,0,0.2);
place-items: center;
place-content: center;
color: #FFFFFF;
}
.oh_bnr_opt1 .item {
position: relative;
}
.oh_bnr_opt1 figure {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.oh_bnr_opt1 figure img {
width: 100%;
height: auto;
display: block;
border-top-right-radius: 15px;
border-bottom-right-radius: 15px;
}
.oh_bnr_opt1 .item .new {
position: absolute;
right: 10px;
top: 10px;
z-index: 1;
font-size: 11px;
color: #333333;
padding-left: 5px;
padding-right: 5px;
padding-top: 0px;
border: 1px solid #333333;
line-height: 1.6em;
}
.oh_bnr_opt1 ul.in_desc li.item h3 {
font-family: "stolzl", sans-serif;
font-weight: 100;
font-size: 20px;
padding: 0;
margin: 0;
}

@media screen and (max-width: 820px) {
.oh_bnr_opt1 {
width: 35%;
}
.oh_bnr_opt1 ul.in_desc li.item h3 {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.oh_bnr_opt1 {
	bottom: 40px;
	right: 15px;
	width: 50%;
	height: auto;
}
.oh_bnr_opt1 ul.in_desc {
border-radius: 10px;
}
.oh_bnr_opt1 figure img {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.oh_bnr_opt1 ul.in_desc li.item h3 {
font-size: 3.6vw;
line-height: 1.5em;
}
.oh_bnr_opt1 .item .new {
font-size: 2.0vw;
line-height: 1.4em;
}
}




/*オープンハウス　バナーの動き*/
.oh_bnr_opt1 {
position: fixed;
right: 380px;
z-index: 3;
/*はじめは非表示*/
opacity: 0;
transform: translateX(350px);
bottom: 40px;
}

@media screen and (max-width: 767px) {
.oh_bnr_opt1 {
top: auto;
right: 370px;
bottom: 30px;
}
}


/*　CLOSEボタン　*/
#close-button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #333333;
  background-color: #FFFFFF;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  position: absolute;
  top: -10px;
  right: -10px;
  padding: 0;
  margin: 0;
  line-height: 1;
  box-sizing: border-box;
  cursor: pointer;
  z-index: 1;
}

#close-button::before, #close-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 12px;
background: #000000;
}
#close-button::before {
transform: translate(-50%,-50%) rotate(45deg);
}

#close-button::after {
transform: translate(-50%,-50%) rotate(-45deg);
}

@media screen and (max-width: 767px) {
#close-button {
width: 20px;
height: 20px;
}
#close-button::before, #close-button::after {
height: 8px;
}
}




/*トップ ONEONE　1th*/
.P_1th {
padding-top: 80px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 767px) {
.P_1th {
padding-top: 80px;
padding-bottom: 80px;
}
}

/*オプション*/
.P_1th_opt1 {

}
.P_1th_opt1 ul.in_desc {
display: grid;
grid-template-columns: 1fr;
margin-bottom: 60px;
}
.P_1th_opt1 figure,.P_1th_opt1 figure.oneone {
width: 77%;
margin-left: auto;
margin-right: auto;
margin-bottom: 30px;
}
.P_1th_opt1 figure img {
width: 100%;
height: auto;
display: block;
}
.P_1th_opt1 ul.in_desc li.item {
position: relative;
text-align: center;
}
.P_1th_opt1 ul.in_desc li.item h3 {
font-size: 30px;
font-weight: 100;
}
.P_1th_opt1 p {
	font-size: 16px;
	text-align: center;
	line-height: 2.5em;
	padding-top: 20px;
	margin-bottom: 80px;
}
.P_1th_opt1 figure.con123 {
	width: 60%;
	margin-bottom: 100px;
}
@media screen and (max-width: 820px) {
.P_1th_opt1 ul.in_desc li.item h3 {
font-size: 25px;
}
}
@media screen and (max-width: 767px) {
.P_1th_opt1 {
	padding-top: 10px;
}
.P_1th_opt1 ul.in_desc {
gap: 20px;
margin-bottom: 50px;
}
.P_1th_opt1 figure,.P_1th_opt1 figure.oneone {
	width: 50%;
	margin-bottom: 50px;
	margin-top: 20px;
}
.P_1th_opt1 ul.in_desc li.item h3 {
font-size: 5.6vw;
}
.P_1th_opt1 p {
	font-size: 3vw;
	padding-top: 0px;
	margin-bottom: 40px;
}
.P_1th_opt1 figure.con123 {
	width: 70%;
	margin-bottom: 70px;
}
}




/*トップ　2th　スタンス*/
.P_2th {
padding-top: 80px;
padding-bottom: 80px;
position: relative;
overflow: hidden;
}
.P_2th.howto4 {
margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
.P_2th {
padding-top: 20px;
padding-bottom: 20px;
}
.P_2th.howto4 {
margin-bottom: 40px;
}
}


/* オプション　画像左 */
.P_2th_opt1 {
position: relative;
}
.P_2th_opt1 ul.in_desc {
display: flex;
/* align-items: center;*/ /* 上下中央 */
justify-content: space-between;
align-items: flex-start; /* 上付に変更 */
gap: 0;
position: relative;
}

.P_2th_opt1 ul.in_desc li.item.area1 {
width: 60%;
position: relative;
z-index: 1;
transform: translateY(0px); /* 画像を少し下にずらす 40px */
}

.P_2th_opt1 ul.in_desc li.item.area2 {
width: 45%;
background-color: #FFFFFF;
padding-left: 50px;
margin-left: -15%; /* 画像とテキストが重なるように調整 */
position: relative;
z-index: 2;
padding-bottom: 100px;
transform: translateY(0px); /* テキストを上にずらす -40px */
padding-top: 0px;
padding-right: 50px;
}

.P_2th_opt1 figure {
width: 100%;
margin-left: auto;
margin-right: auto;
}

.P_2th_opt1 figure img {
width: 100%;
height: auto;
display: block;
}

.P_2th_opt1 ul.in_desc li.item h3 {
font-size: 40px;
letter-spacing: 0.2em;
font-weight: 300;
line-height: 0.9em;
margin-bottom: 30px;
}

.P_2th_opt1 ul.in_desc li.item h3 span {
font-family: "stolzl", sans-serif;
font-weight: 100;
font-size: 13px;
letter-spacing: 0.1em;
display: block;
}

.P_2th_opt1 ul.in_desc li.item p {
font-size: 13px;
font-weight: 100;
margin-bottom: 40px;
}

.P_2th_opt1 ul.in_desc li.item p strong {
font-size: 15px;
font-weight: 500;
display: block;
margin-bottom: 5px;
}


/* パララックス */
.P_2th .image-wrap {
position: relative;
width: 100%;
aspect-ratio: 1034 / 684;
overflow: hidden;
}
.P_2th .image-wrap figure.parallax-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
/*transform: scale(1);
transition: transform 0.05s linear;*/
aspect-ratio: 1034 / 684; /* 画像の横縦比（横:縦） */
}


/*ケンバーンズアニメーションを定義*/
/* 初期状態はちょっと拡大 */
.P_2th .image-wrap figure.parallax-img {
  transform: scale(1.2);
  /* transition は不要になるので削除 */
  transition: none;
}

/* howto_pX 要素が visible になったときだけアニメーション */
.P_2th .howto_p1.visible figure.parallax-img,
.P_2th .howto_p2.visible figure.parallax-img,
.P_2th .howto_p3.visible figure.parallax-img,
.P_2th .howto_p4.visible figure.parallax-img {
  animation: zoomOut 6s ease-out forwards;
}

/* キーフレーム（拡大→縮小） */
@keyframes zoomOut {
  from {
    transform: scale(1.2);
  }
  to {
    transform: scale(1);
  }
}




.P_2th .howto_p1 figure.parallax-img {
background-image: url("../parts/t_p01_pc.webp?v=20250401");
}
.P_2th .howto_p2 figure.parallax-img {
background-image: url("../parts/t_p02_pc.webp?v=20250401");
}
.P_2th .howto_p3 figure.parallax-img {
background-image: url("../parts/t_p03_pc.webp?v=20250401");
}
.P_2th .howto_p4 figure.parallax-img {
background-image: url("../parts/t_p04_pc.webp?v=20250401");
}

@media screen and (max-width: 767px) {
.P_2th .image-wrap {
aspect-ratio: 800 / 606;
}
.P_2th .image-wrap figure.parallax-img {
background-size: cover;
background-position: center;
aspect-ratio: 800 / 606; /* 画像の横縦比（横:縦） */
}
.P_2th .howto_p1 figure.parallax-img {
background-image: url("../parts/t_p01_sp.webp?v=20250401");
}
.P_2th .howto_p2 figure.parallax-img {
background-image: url("../parts/t_p02_sp.webp?v=20250401");
}
.P_2th .howto_p3 figure.parallax-img {
background-image: url("../parts/t_p03_sp.webp?v=20250401");
}
.P_2th .howto_p4 figure.parallax-img {
background-image: url("../parts/t_p04_sp.webp?v=20250401");
}
}


@media screen and (max-width: 1024px) {
.P_2th_opt1 ul.in_desc li.item.area2 {
padding-bottom: 40px;
}

}

@media screen and (max-width: 767px) {
.P_2th_opt1 ul.in_desc {
flex-direction: column;
gap: 0px;
}

.P_2th_opt1 ul.in_desc li.item.area1,
.P_2th_opt1 ul.in_desc li.item.area2 {
width: 100%;
margin-left: 0;
box-sizing: border-box; /* パディングを含めて100%に */
}

.P_2th_opt1 ul.in_desc li.item.area2 {
padding-top: 50px;
padding-left: 30px;
padding-right: 30px;
}

.P_2th_opt1 figure {
width: 100%;
}

.P_2th_opt1 ul.in_desc li.item h3 {
font-size:8.4vw;
margin-bottom: 40px;
}
.P_2th_opt1 ul.in_desc li.item p {
font-size: 2.5vw;
}

.P_2th_opt1 ul.in_desc li.item p strong {
font-size: 3vw;
}
}




/* オプション　画像右 */
.P_2th_rev_opt1 {
position: relative;
}
.P_2th_rev_opt1 ul.in_desc {
display: flex;
/* align-items: center;*/ /* 上下中央 */
justify-content: space-between;
align-items: flex-start; /* 上付に変更 */
gap: 0;
position: relative;
}

.P_2th_rev_opt1 ul.in_desc li.item.area1 {
width: 60%;
position: relative;
z-index: 1;
transform: translateY(0px); /* 画像を少し下にずらす 40px */
}

.P_2th_rev_opt1 ul.in_desc li.item.area2 {
width: 45%;
background-color: #FFFFFF;
padding-left: 50px;
margin-right: -15%; /* 画像とテキストが重なるように調整 */
position: relative;
z-index: 2;
padding-bottom: 100px;
transform: translateY(0px); /* テキストを上にずらす -40px */
padding-top: 0px;
padding-right: 50px;
}

.P_2th_rev_opt1 figure {
width: 100%;
margin-left: auto;
margin-right: auto;
}

.P_2th_rev_opt1 figure img {
width: 100%;
height: auto;
display: block;
}

.P_2th_rev_opt1 ul.in_desc li.item h3 {
font-size: 40px;
letter-spacing: 0.2em;
font-weight: 300;
line-height: 0.9em;
margin-bottom: 30px;
}

.P_2th_rev_opt1 ul.in_desc li.item h3 span {
font-family: "stolzl", sans-serif;
font-weight: 100;
font-size: 13px;
letter-spacing: 0.1em;
display: block;
}

.P_2th_rev_opt1 ul.in_desc li.item p {
font-size: 13px;
font-weight: 100;
margin-bottom: 40px;
}

.P_2th_rev_opt1 ul.in_desc li.item p strong {
font-size: 15px;
font-weight: 500;
display: block;
margin-bottom: 5px;
}

@media screen and (max-width: 1024px) {
.P_2th_rev_opt1 ul.in_desc li.item.area2 {
padding-bottom: 40px;
}

}
@media screen and (max-width: 820px) {


}
@media screen and (max-width: 767px) {
.P_2th_rev_opt1 ul.in_desc {
flex-direction: column-reverse;
gap: 0px;
}

.P_2th_rev_opt1 ul.in_desc li.item.area1,
.P_2th_rev_opt1 ul.in_desc li.item.area2 {
width: 100%;
margin-left: 0;
box-sizing: border-box; /* パディングを含めて100%に */
}

.P_2th_rev_opt1 ul.in_desc li.item.area2 {
padding-top: 50px;
padding-left: 30px;
padding-right: 30px;
}

.P_2th_rev_opt1 figure {
width: 100%;
}

.P_2th_rev_opt1 ul.in_desc li.item h3 {
font-size:8.4vw;
margin-bottom: 40px;
}
.P_2th_rev_opt1 ul.in_desc li.item p {
font-size: 2.5vw;
}

.P_2th_rev_opt1 ul.in_desc li.item p strong {
font-size: 3vw;
}
}




/* オプション */
.howto01 {
position: absolute;
bottom: 40px;
z-index: 2;
left: 50%;
transform: translateX(-10%);
}
.howto01 img {
height: 90px;
width: auto;
display: block;
}
@media screen and (max-width: 820px) {
.howto01 {
bottom: 60px;
transform: translateX(-130%);
}
.howto01 img {
height: 70px;
}

}
@media screen and (max-width: 767px) {
.howto01 {
transform: translateX(0%);
bottom: -5px;
top: auto;
width: 100%;
left: auto;
right: 0px;
}
.howto01 img {
width: 45%;
display: block;
margin-right: 0px;
margin-left: auto;
}

}


/* オプション */
.P_2th .howto02 {
position: absolute;
bottom: 20px;
z-index: 2;
left: 50%;
transform: translateX(-60%);
}
.P_2th .howto02 img {
height: 120px;
width: auto;
display: block;
}
@media screen and (max-width: 820px) {
.P_2th .howto02 {
bottom: 40px;
transform: translateX(-20%);
}
.P_2th .howto02 img {
height: 80px;
}
}
@media screen and (max-width: 767px) {
.P_2th .howto02 {
	transform: translateX(0%);
	bottom: -5px;
	top: auto;
	width: 100%;
	left: auto;
	right: 0px;
}
.P_2th .howto02 img {
height: auto;
width: 80%;
display: block;
margin-right: 0px;
margin-left: auto;
}

}

/* オプション */
.P_2th .howto03 {
position: absolute;
bottom: 30px;
z-index: 2;
left: 50%;
transform: translateX(-10%);
}
.P_2th .howto03 img {
height: 120px;
width: auto;
display: block;
}
@media screen and (max-width: 820px) {
.P_2th .howto03 {
bottom: 30px;
transform: translateX(-100%);
}
.P_2th .howto03 img {
height: 80px;
}

}
@media screen and (max-width: 767px) {
.P_2th .howto03 {
	transform: translateX(0%);
	bottom: -5px;
	top: auto;
	width: 100%;
	left: auto;
	right: 0px;
}
.P_2th .howto03 img {
height: auto;
width: 75%;
display: block;
margin-right: 0px;
margin-left: auto;
}

}


/* オプション */
.P_2th .howto04 {
position: absolute;
bottom: 40px;
z-index: 2;
left: 50%;
transform: translateX(-35%);
}
.P_2th .howto04 img {
height: 90px;
width: auto;
display: block;
}
@media screen and (max-width: 820px) {
.P_2th .howto04 {
bottom: 60px;
transform: translateX(-130%);
}
.P_2th .howto04 img {
height: 70px;
}

}
@media screen and (max-width: 767px) {
.P_2th .howto04 {
	left: auto;
	transform: translateX(0%);
	bottom: 0px;
	top: auto;
	right: 0px;
	width: 100%;
}
.P_2th .howto04 img {
	height: auto;
	width: 100%;
display: block;
}

}






/*スタンス　モーダル*/
.in_stance {
	width: 100%;
	padding: 40px;
}
.in_stance h3 {
font-size: 40px;
letter-spacing: 0.2em;
font-weight: 300;
line-height: 0.9em;
margin-bottom: 30px;
}

.in_stance h3 span {
font-family: "stolzl", sans-serif;
font-weight: 100;
font-size: 13px;
letter-spacing: 0.1em;
display: block;
}

.in_stance p {
font-size: 13px;
font-weight: 100;
margin-bottom: 0px;
}

.in_stance p strong {
font-size: 15px;
font-weight: 500;
display: block;
margin-bottom: 5px;
}

@media screen and (max-width: 767px) {
.in_stance {
	padding: 30px;
}
.in_stance h3 {
font-size:8.4vw;
margin-bottom: 40px;
}
.in_stance p {
font-size: 2.5vw;
}

.in_stance p strong {
font-size: 3vw;
}
}



/*全て共通：hideエリアをはじめは非表示*/
.hide-area{
display: none;
}
.modaal-container {
padding: 30px;
background: #fff;
border-radius: 0px!important;
box-sizing: border-box;
}
/*全て共通：モーダルのボタンの色を変更したい場合*/
.modaal-close:after, 
.modaal-close:before{
background:#ccc;	
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{
background:#666;
}
@media screen and (max-width: 767px) {
.modaal-container {
padding: 0px;
}
}




/*t_お知らせ*/
.P_3th {
padding-top: 80px;
padding-bottom: 100px;
position: relative;
background-color: #F3F3F3;
z-index: 0;
overflow: hidden;
}
/*.P_3th::before {
content: "NEWS";
font-size: 130px;
color: #EFEFEF;
line-height: 1em;
font-family: "stolzl", sans-serif;
font-weight: 100;
position: absolute;
bottom: -50px;
z-index: 0;
right: 0px;
}*/
.P_3th::after {
content: "";
position: absolute;
width: 300px;
aspect-ratio: 1 / 1; /* 画像の横縦比（横:縦） */
left: 50%;
transform: translateX(-250%);
background-image: url("../parts/t_news_pc.webp");
background-size: contain;
background-repeat: no-repeat;
top: -60px;
}
@media screen and (max-width: 767px) {
.P_3th {
padding-top: 40px;
padding-bottom: 40px;
}
/*.P_3th::before {
content: "NEWS";
font-size: 50px;
color: #EFEFEF;
bottom: auto;
right: auto;
left: 0px;
top: -250px;
}*/
.P_3th::after {
display: none;
}
figure.t_news {
width: 100%;
height: auto;
overflow: hidden;
}
figure.t_news img {
width: 100%;
height: auto;
display: block;
}
}



/* ライン文字 */
.P_3th .tl_news {
position: absolute;
bottom: 0px;
z-index: 2;
left: 50%;
transform: translateX(60%);
}
.P_3th .tl_news img {
height: 90px;
width: auto;
display: block;
}
@media screen and (max-width: 820px) {
.P_3th .tl_news {
transform: translateX(50%);
}
.P_3th .tl_news img {
height: 70px;
}

}
@media screen and (max-width: 767px) {
.News_sp {
	position: relative;
}
.News_sp .tl_news {
	position: absolute;
	right: 0px;
	bottom: 0px;
	width: 100%;
}
.News_sp .tl_news img {
height: auto;
width: 45%;
display: block;
margin-right: 0px;
margin-left: auto;
}

}




/*お知らせ一覧*/
.top_news {
margin-bottom: 60px;
}
.top_news .item {
display: flex;
gap: 0px;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 30px;
padding-top: 30px;
position: relative;
z-index: 1;
transition: all 0.3s;
}
.top_news .item::before {
content: "+";
font-size: 20px;
position: absolute;
z-index: -1;
left: -20px;
bottom: -14px;
font-family: "stolzl", sans-serif;
font-weight: 100;
}
.top_news .item .link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.top_news .item .update {
background-color: #333333;
color: #FFFFFF;
font-size: 12px;
line-height: 1.5em;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
position: absolute;
right: 0px;
top: 0px;
}
.top_news .item .in_if01 p {
margin-right: 20px;
font-family: "stolzl", sans-serif;
font-weight: 100;
}
.top_news .item .in_if01b {
flex-basis: 15%;
font-weight: 500;
}
.top_news .item .link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.top_news .item:hover{
z-index: 0;
background-color: rgba(204,204,204,0.10);
}
@media(max-width: 820px){
.top_news {
width: 96%;
margin-left: auto;
margin-right: auto;
}
.top_news .item::before {
bottom: -12px;
}
}
@media(max-width: 767px){
.top_news .item::before {
font-size: 4.8vw;
bottom: -11px;
}
.top_news .item {
flex-direction: column;
padding-bottom: 15px;
padding-top: 15px;
}
.top_news .item .in_if01 p {
margin-right: 20px;
}
.top_news .item .update {
font-size: 2.3vw;
padding-left: 7px;
padding-right: 7px;
top: 20px;
}
}



/*t_WORKS*/
.P_4th {
padding-top: 130px;
padding-bottom: 100px;
position: relative;
z-index: 0;
overflow: hidden;
}
.P_4th figure {
width: 100%;
margin-left: auto;
margin-right: auto;
}
.P_4th figure img {
width: 100%;
height: auto;
display: block;
}
@media screen and (max-width: 767px) {
.P_4th {
padding-top: 40px;
padding-bottom: 40px;
}
}


/* ライン文字 */
.P_4th .tl_works {
position: absolute;
bottom: -60px;
z-index: 2;
left: 50%;
transform: translateX(-120%);
}
.P_4th .tl_works img {
height: 90px;
width: auto;
display: block;
}
@media screen and (max-width: 820px) {
.P_4th .tl_works {
bottom: -50px;
transform: translateX(-100%);
}
.P_4th .tl_works img {
height: 70px;
}

}
@media screen and (max-width: 767px) {
.P_4th .tl_works {
	bottom: 0px;
	left: auto;
	transform: translateX(0%);
	right: 0px;
	width: 100%;
}
.P_4th .tl_works img {
height: auto;
width: 60%;
display: block;
margin-right: 0px;
margin-left: auto;
}

}

/*オプション*/
.P_4th_opt1 {
padding-top: 0px;
padding-bottom: 0px;
}
.P_4th_opt1 ul.in_desc {
display: grid;
gap: 30px;
grid-template-columns: 1fr;
margin-bottom: 100px;
}
.P_4th_opt1 ul.in_desc li.item {
position: relative;
}
/*.P_4th_opt1 ul.in_desc li.item::before {
content: "WORKS";
font-size: 130px;
color: #EFEFEF;
line-height: 1em;
font-family: "stolzl", sans-serif;
font-weight: 100;
position: absolute;
z-index: 1;
left: 50%;
transform: translateX(-115%);
bottom: -40px;
}*/
@media screen and (max-width: 820px) {
.P_4th_opt1 ul.in_desc {
gap: 20px;
}
}
@media screen and (max-width: 767px) {
.P_4th_opt1 {
padding-top: 40px;
padding-bottom: 30px;
}
/*.P_4th_opt1 ul.in_desc li.item::before {
font-size: 50px;
left: auto;
transform: translateX(0%);
right: 0px;
bottom: -20px;
}*/
.P_4th_opt1 ul.in_desc {
gap: 20px;
grid-template-columns: 1fr;
margin-bottom: 50px;
}
}


.P_4th_opt2 {
padding-top: 0px;
padding-bottom: 0px;
position: relative;
}
.P_4th_opt2 ul.in_desc2 {
display: grid;
gap: 40px;
grid-template-columns: 1fr 1fr 1.3fr;
margin-bottom: 60px;
}
.P_4th_opt2 ul.in_desc2 li.item {
position: relative;
}
.P_4th_opt2 ul.in_desc2 li.item figure {
width: 100%;
aspect-ratio: 3 / 2.6; /* 横：縦の比率 */
overflow: hidden; /* はみ出た部分を非表示 */
display: flex;
justify-content: center;
align-items: center;
}
.P_4th_opt2 ul.in_desc2 li.item figure img {
width: 100%;
height: 100%;
object-fit: cover; /* 画像をトリミング */
}

.P_4th_opt2 ul.in_desc2 li.item .update {
background-color: #333333;
color: #FFFFFF;
font-size: 12px;
line-height: 1.5em;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
position: absolute;
top: -30px;
left: 0px;
}
.P_4th_opt2 .btn-wrapper {
position: absolute;
right: -100px;
bottom: 0px;
}
.P_4th_opt2 ul.in_desc2 li.item .link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.P_4th_opt2 ul.in_desc2 li.item:hover{
opacity: 0.8;
}
@media screen and (max-width: 820px) {
.P_4th_opt2 .btn-wrapper {
right: -70px;
}
}
@media screen and (max-width: 767px) {
.P_4th_opt2 ul.in_desc2 {
gap: 35px;
grid-template-columns: 1fr 1fr;
margin-bottom: 50px;
width: 85%;
margin-left: auto;
margin-right: auto;
}
.P_4th_opt2 ul.in_desc2 li.item .update {
font-size: 2.3vw;
padding-left: 7px;
padding-right: 7px;
top: -20px;
}
.P_4th_opt2 .btn-wrapper {
position: static;
right: auto;
bottom: auto;
}
}




/*t_GOOD LIFE*/

/*トップ　Good life*/
.P_5th {
	padding-top: 80px;
	padding-bottom: 100px;
	position: relative;
	background-color: #F3F3F3;
	z-index: 0;
	overflow: hidden;
}
@media screen and (max-width: 767px) {
.P_5th {
padding-top: 40px;
padding-bottom: 40px;
}
}


/* オプション　画像左 */
.P_5th_opt1 {
	position: relative;
}
.P_5th_opt1 ul.in_desc {
display: flex;
/* align-items: center;*/ /* 上下中央 */
justify-content: space-between;
align-items: flex-start; /* 上付に変更 */
gap: 0;
position: relative;
}

.P_5th_opt1 ul.in_desc li.item.area1 {
width: 60%;
position: relative;
z-index: 1;
transform: translateY(0px); /* 画像を少し下にずらす 40px */
}

.P_5th_opt1 ul.in_desc li.item.area2 {
width: 45%;
background-color: #F3F3F3;
padding-left: 50px;
margin-left: -15%; /* 画像とテキストが重なるように調整 */
position: relative;
z-index: 2;
padding-bottom: 50px;
transform: translateY(0px); /* テキストを上にずらす -40px */
padding-top: 0px;
padding-right: 50px;
}

.P_5th_opt1 figure {
width: 100%;
margin-left: auto;
margin-right: auto;
}

.P_5th_opt1 figure img {
width: 100%;
height: auto;
display: block;
}
.P_5th_opt1 ul.in_desc li.item.area1 .watashi {
	width: 35px;
	z-index: 1;
	position: absolute;
	top: 70px;
	left: 250px;
}

.P_5th_opt1 ul.in_desc li.item h3 {
font-size: 38px;
letter-spacing: 0.2em;
font-weight: 300;
line-height: 1.3em;
margin-bottom: 30px;
}

.P_5th_opt1 ul.in_desc li.item h3 span {
font-family: "stolzl", sans-serif;
font-weight: 100;
font-size: 13px;
letter-spacing: 0.1em;
display: block;
}

.P_5th_opt1 ul.in_desc li.item p {
font-size: 16px;
font-weight: 100;
margin-bottom: 40px;
}

/* パララックス */
.P_5th .image-wrap {
position: relative;
width: 100%;
aspect-ratio: 1035 / 784;
overflow: hidden;
}
.P_5th .image-wrap figure {
position: absolute;
top: 0;
left: 0;
width: 100%;
/*height: 125%;*/
background-size: cover;
background-position: center;
transform: translateY(0);
transition: transform 0.1s linear;
aspect-ratio: 1035 / 784; /* 画像の横縦比（横:縦） */
background-image: url("../parts/t_glife_pc.webp?v=20250409");
}
.P_5th .image-wrap figure.parallax-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
/*height: 125%;*/
background-size: cover;
background-position: center;
transform: translateY(0);
transition: transform 0.1s linear;
aspect-ratio: 1034 / 684; /* 画像の横縦比（横:縦） */
}


.P_5th .howto_p3 figure.parallax-img {
background-image: url("../parts/t_glife_pc.webp?v=20250409");
}

@media screen and (max-width: 767px) {
.P_5th .image-wrap {
/*aspect-ratio: 800 / 606;*/
}
.P_5th .image-wrap figure.parallax-img {
background-size: cover;
background-position: center;
aspect-ratio: 800 / 606; /* 画像の横縦比（横:縦） */
}

.P_5th .howto_p3 figure.parallax-img {
background-image: url("../parts/t_glife_sp.webp?v=20250409");
}
}


@media screen and (max-width: 1024px) {
.P_5th_opt1 ul.in_desc li.item.area2 {
padding-bottom: 40px;
}

}

@media screen and (max-width: 767px) {
.P_5th_opt1 ul.in_desc {
flex-direction: column;
gap: 0px;
}

.P_5th_opt1 ul.in_desc li.item.area1,
.P_5th_opt1 ul.in_desc li.item.area2 {
width: 100%;
margin-left: 0;
box-sizing: border-box; /* パディングを含めて100%に */
}

.P_5th_opt1 ul.in_desc li.item.area2 {
padding-top: 50px;
padding-left: 30px;
padding-right: 30px;
}

.P_5th_opt1 figure {
width: 100%;
}
.P_5th_opt1 ul.in_desc li.item.area1 .watashi {
	width: 26px;
	z-index: 1;
	top: 60px;
	left: auto;
	right: 15%;
}
.P_5th_opt1 ul.in_desc li.item h3 {
font-size:7.0vw;
margin-bottom: 40px;
}
.P_5th_opt1 ul.in_desc li.item p {
font-size: 3.1vw;
}
}

/* オプション */
.P_5th .howto03 {
position: absolute;
bottom: 65px;
z-index: 2;
left: 50%;
transform: translateX(-80%);
}
.P_5th .howto03 img {
height: 120px;
width: auto;
display: block;
}
@media screen and (max-width: 820px) {
.P_5th .howto03 {
bottom: 30px;
transform: translateX(-100%);
}
.P_5th .howto03 img {
height: 80px;
}

}
@media screen and (max-width: 767px) {
.P_5th .howto03 {
	left: auto;
	transform: translateX(0%);
	bottom: -5px;
	top: auto;
	right: 0px;
	width: 100%;
}
.P_5th .howto03 img {
	height: auto;
	width: 90%;
	display: block;
	margin-right: 0px;
	margin-left: auto;
}

}




/*t_スタッフブログ*/
.P_6th_p {
	padding-top: 30px;
	padding-bottom: 0px;
	position: relative;
}

.P_6th {
padding-top: 0px;
padding-bottom: 100px;
position: relative;
z-index: 0;
background-color: #F3F3F3;
}

/*パララックス*/
.Blog_wrap{
position: relative;
width: 100%;
overflow: hidden;
aspect-ratio: 1600 / 734;
}
.t_blog {
position: absolute;
z-index: -1;
top: 0;
width: 100%;
aspect-ratio: 1600 / 734;
background: url("../parts/t_blog_pc.webp?v=20250427") no-repeat top center;
background-size: cover;
transform-origin: center;
transition: transform 0.1s linear;
will-change: transform;
}


.T_wrap {
position: sticky;
top: 0;
z-index: 1;
background: white;
padding-top: 85px;
padding-right: 0;
padding-left: 0;
padding-bottom: 1px;
}

@media screen and (max-width: 767px) {
.P_6th_p {
padding-top: 10px;
}

.P_6th {
padding-bottom: 50px;
}

/*パララックス*/
.Blog_wrap{
aspect-ratio: 800 / 606;
}
.t_blog {
aspect-ratio: 800 / 606;
background: url("../parts/t_blog_sp.webp?v=20250427") no-repeat top center;
background-size: cover;
transform-origin: center;
}

.T_wrap {
padding-top: 70px;
}
}



/* オプション */
.P_6th_p .t_Sblog {
	position: absolute;
	bottom: 0px;
	z-index: 0;
	right: 0px;
}
.P_6th_p .t_Sblog img {
height: 100px;
width: auto;
display: block;
}
@media screen and (max-width: 820px) {
.P_6th_p .t_Sblog img {
height: 70px;
}

}
@media screen and (max-width: 767px) {
.P_6th_p .t_Sblog {
	width: 100%;
}
.P_6th_p .t_Sblog img {
	height: auto;
	width: 100%;
}

}




/*ブログ一覧*/
.top_blog {
	padding-top: 80px;
	padding-bottom: 60px;
}
.top_blog .item {
display: flex;
gap: 0px;
border-bottom: 1px solid #CCCCCC;
padding-bottom: 30px;
padding-top: 30px;
position: relative;
z-index: 1;
transition: all 0.3s;
}
.top_blog .item .link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.top_blog .item .update {
background-color: #333333;
color: #FFFFFF;
font-size: 12px;
line-height: 1.5em;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 0px;
position: absolute;
right: 0px;
top: 0px;
}
.top_blog .item .in_if01 p {
margin-right: 20px;
font-family: "stolzl", sans-serif;
font-weight: 100;
}
.top_blog .item .in_if01b {
	flex-basis: 30%;
	font-weight: 500;
}
.top_blog .item .in_if02 {
	flex-basis: 60%;
}
.top_blog .item .link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.top_blog .item:hover{
z-index: 0;
background-color: rgba(204,204,204,0.10);
}
@media(max-width: 820px){
.top_blog {
width: 96%;
margin-left: auto;
margin-right: auto;
	padding-top: 40px;
	padding-bottom: 40px;
}
.top_blog .item::before {
bottom: -12px;
}
}
@media(max-width: 767px){
.top_blog .item::before {
font-size: 4.8vw;
bottom: -11px;
}
.top_blog .item {
flex-direction: column;
padding-bottom: 15px;
padding-top: 15px;
}
.top_blog .item .in_if01 p {
margin-right: 20px;
}
.top_blog .item .update {
font-size: 2.3vw;
padding-left: 7px;
padding-right: 7px;
top: 10px;
}
}








/* バーガーナビ　フッター */
#g-nav .F_navi{
padding-top: 60px;
padding-bottom: 0px;
}
#g-nav .F_navi .in_desc{
display: grid;
gap: 0px 30px;
grid-template-columns: 1fr 1fr 1fr;
}
#g-nav .F_navi .in_desc h3 a{
	padding-bottom: 10px;
	padding-top: 10px;
	border-bottom: 1px solid #CCCCCC;
	display: block;
	position: relative;
	padding-left: 10px;
	font-size: 12px;
}
#g-nav .F_navi .in_desc h3 a::after {
position: absolute;
bottom: -1px;
content: '';
width: 10px;
height: 2px;
background-color: #333333;
left: 0%;
}
@media screen and (max-width: 820px) {
#g-nav .F_navi .in_desc{
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width: 767px) {
#g-nav .F_navi .in_desc{
gap: 0px 0px;
grid-template-columns: 1fr;
}
#g-nav .F_navi .in_desc h3 a{
font-size: 3vw;
}
}


#g-nav .G_navi{
padding-top: 60px;
padding-bottom: 50px;
background-color: #F5F5FA;
}
#g-nav footer{
}
@media screen and (max-width: 767px) {
#g-nav footer{
padding-top: 50px;
padding-bottom: 70px;
}
}


/* フッター */
footer{
padding-top: 60px;
padding-bottom: 100px;
margin: 0;
background-color: #F0F0FA;
}
footer p.copyright {
font-size: 12px;
padding-top: 40px;
}
@media screen and (max-width: 767px) {
footer{
padding-top: 30px;
padding-bottom: 120px;
}
footer p.copyright {
font-size: 2.5vw;
padding-top: 20px;
text-align: center;
}
}

.f_nav {
display: grid;
gap: 10px 0px;
grid-template-columns: 1fr 3fr 1fr;
padding-bottom: 40px;
}
.f_nav .item img {
width: 100%;
height: auto;
display: block;
}
.f_nav .item.area1 {
border-right: 1px solid #CCCCCC;
padding-right: 30px;
}
.f_nav .item.area2 p {
line-height: 2em;
font-size: 24px;
font-family: "stolzl", sans-serif;
font-weight: 100;
display: flex;
align-items: center;
padding-left: 30px;
}
.f_nav .item.area2 p span {
font-size: 18px;
padding-right: 10px;
}
.f_nav .item.area4 {
grid-row: 2 / 3;
grid-column: 1 / 4;
}

@media(max-width: 767px){
.f_nav {
grid-template-columns: 1fr 1.3fr;
gap: 15px 0px;
}
.f_nav .item.area1 {
padding-right: 15px;
}
.f_nav .item.area2 p {
font-size: 5vw;
padding-left: 15px;
}
.f_nav .item.area2 p span {
font-size: 3vw;
padding-right: 5px;
}
.f_nav .item.area3 {
grid-row: 3 / 4;
grid-column: 1 / 3;
}
.f_nav .item.area4 {
grid-row: 2 / 3;
grid-column: 1 / 3;
font-size: 3vw;
}
}


/*SNS nav*/
.flex_sns {
display: flex;
/*justify-content: center;*/
flex-direction:column;
gap: 10px;
}
.flex_sns .area1 {
display: flex;
gap: 20px;
}
.flex_sns .area2 {
	display: flex;
	gap: 22px;
}
.flex_sns .item {

}
.flex_sns .item img {
	height: 25px;
	width: auto;
}
@media screen and (max-width: 767px) {
.flex_sns {
gap: 15px;
margin-top: 30px;
}
.flex_sns .area1 {
justify-content: center;
}
.flex_sns .area2 {
justify-content: center;
gap: 25px;
}
.flex_sns .item img {
	height: 18px;
}
}




/*footナビ2*/
.G_navi{
	padding-top: 60px;
	padding-bottom: 60px;
	margin: 0;
	background-color: #FFFFFF;
	/*border-top: 1px solid #CCCCCC;*/
}
.line_nv{
	border-top: 1px solid #DDDDDD;
}
@media screen and (max-width: 767px) {
.G_navi{
padding-top: 60px;
padding-bottom: 30px;
}
}





.f_nav2 {
margin-bottom: 0px;
}
.f_nav2 ul.in_desc {
display: grid;
grid-template-columns: 2fr 3.6fr;
align-items: start; /* 行のアイテムを上揃え */
gap: 70px;
}
.f_nav2 ul.in_desc li.item h3 a{
padding-top: 0px;
padding-bottom: 5px;
display: block;
font-weight: 200;
}
.f_nav2 ul.in_desc li.item.area1{
font-family: "stolzl", sans-serif;
font-weight: 100;
letter-spacing: 0.1em;
display: grid;
gap: 0px 0px;
grid-template-columns: 1fr 1.3fr;
align-self: start; /* 自分自身も上揃えに */
border-right: 1px solid #CCCCCC;
}
.f_nav2 ul.in_desc li.item h3{
	font-family: "Noto Sans JP", sans-serif;
	font-size: 13px;
	padding-top: 5px;
}
.f_nav2 ul.in_desc li.item h3 span{
margin-right: 15px;
font-weight: 700;
}
.f_nav2 ul.in_desc li.item.area2{
display: grid;
gap: 0px 10px;
grid-template-columns: 1.2fr 1fr 1.2fr;
}
.f_nav2 ul.in_desc li.item.area3{
	display: none;
}

/*アコーディオンタイトル*/
.f_nav2 h3.ad_T {
	position: relative;
	cursor: pointer;
	padding-right: 2%;
	transition: all .3s ease;
	padding-bottom: 5px;
}
.f_nav2 h3.ad_T::after {
content: "";
position: absolute;
width: 18px;
aspect-ratio: 1 / 1; /* 画像の横縦比（横:縦） */
top: 50%;
transform: translateY(-50%);
right: 30px;
background-image: url("../parts/i_arw01.svg");
background-size: contain;
background-repeat: no-repeat;
}
.f_nav2 h3.ad_T.close::after{
background-image: url("../parts/i_arw02.svg");
}
/*アコーディオンで現れるエリア*/
.f_nav2 .in_box {
	display: none;/*はじめは非表示*/
	padding-left: 1em;
	padding-bottom: 15px;
	padding-top: 5px;
}


.f_nav2 ul.in_desc li.item.area2 p{
font-size: 13px;
}
.f_nav2 ul.in_desc li.item p a:hover,.f_nav2 ul.in_desc li.item h3 a:hover{
color: #666666;
}

@media screen and (max-width: 980px) {
.f_nav2 ul.in_desc {
grid-template-columns: 1.2fr 5fr;
gap: 30px;
}
.f_nav2 ul.in_desc li.item.area1{
grid-template-columns: 1fr;
}
.f_nav2 ul.in_desc li.item.area2{
gap: 0px 0px;
grid-template-columns: 1.3fr 1fr 1.3fr;
}
}

@media screen and (max-width: 767px) {
.f_nav2 ul.in_desc {
grid-template-columns: 1fr;
gap: 50px;
font-size: 3vw;
}
.f_nav2 ul.in_desc li.item.area2{
	display: none;
}
.f_nav2 ul.in_desc li.item.area3{
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr;
}
.f_nav2 ul.in_desc li.item.area1{
grid-template-columns: 1fr 1fr;
border-right: none;
}
.f_nav2 ul.in_desc li.item.area3 p{
	font-size: 2.6vw;
	padding-bottom: 5px;
}
.f_nav2 h3.ad_T::after {
right: 0px;
}
.f_nav2 ul.in_desc li.item h3{
font-size: 3vw;
}
}



/*固定フッター*/
.fixnav {
width: 100%;
position: fixed;
margin: 0;
bottom: 0px;
display: none;
z-index: 1;
}
.fixnav img {
width: 100%;
height: auto;
display: block;
}
.fixnav .nav {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 0px;
}
@media screen and (max-width: 767px) {
.fixnav {
display: block;
}
}



/*PAGE TOP（上へ）*/
/*リンクの形状*/
#page-top a{
display: flex;
justify-content: center;
align-items: center;
background-color: #333333;
border-radius: 50%;
width: 50px;
height: 50px;
color: #FFFFFF;
text-align: center;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s;
}
#page-top a:hover{
background-color: #E1E1E1;
}
#page-top span{
display: inline-block;
width: 10px;
height: 10px;
border-top:1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
transform: rotate(45deg);
margin: 8px 0 0 0;
}
/*リンクを右下に固定*/
#page-top {
position: fixed;
right: 50px;
bottom: 30px;
z-index: 2;
/*はじめは非表示*/
opacity: 0;
transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
from {
opacity: 0;
transform: translateY(300px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/*　下に下がる動き　*/

#page-top.DownMove{
animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
from {
opacity: 1;
transform: translateY(0);
}
to {
opacity: 1;
transform: translateY(300px);
}
}
@media screen and (max-width: 767px) {
#page-top {
position: fixed;
right: 5%;
bottom: 15%;
display: none;
}
}


/*カスタム投稿コンテンツタイトル*/
h1.cT {
font-size: 30px;
text-align: center;
margin-bottom: 0px;
line-height: 1.2em;
background-color: #F5F5F5;
padding-top: 30px;
padding-bottom: 30px;
}
h1.cT span.en {
font-family: 'Josefin Sans', sans-serif;
font-optical-sizing: auto;
font-weight: 700;
font-size: 20px;
display: block;
}
/*h1.cT strong {
font-size: 14px;
background-color: #FFFFFF;
font-weight: normal;
padding-left: 20px;
border-radius: 30px;
padding-right: 20px;
line-height: 1.8em;
display: inline-block;
}*/
h1.cT span.cat {
font-size: 14px;
background-color: #FFFFFF;
font-weight: normal;
padding-left: 20px;
border-radius: 30px;
padding-right: 20px;
line-height: 2em;
display: inline-block;
margin-left: 10px;
border: 1px solid #CCCCCC;
}
@media screen and (max-width: 767px) {
h1.cT {
font-size: 5.8vw;
padding-top: 20px;
padding-bottom: 20px;
}
h1.cT span.en {
font-size: 3.8vw;
}
h1.cT span.cat {
font-size: 2.5vw;
margin-left: 5px;
padding-left: 10px;
padding-right: 10px;
}
/*h1.cT strong {
font-size: 8.4vw;
display: block;
}*/
}



/*シングルページ　Topics*/
.s_Topics{
width: 100%;
padding-top: 0px;
padding-bottom: 80px;
}
.s_Topics h1.subT{
font-size: 30px;
border-bottom: 1px solid #666666;
padding-bottom: 15px;
margin-bottom: 20px;
padding-right: 100px;
line-height: 1.6em;
}
.s_Topics .T_desc{
padding-bottom: 40px;
position: relative;
margin-top: 50px;
}
.s_Topics .T_desc p.date{
position: absolute;
right: 0px;
color: #777777;
top: 0px;
}
/*xoイベント開催日時*/
.Xo_ev .s_Topics .T_desc p.date{
position: static;
right: auto;
color: #000000;
top: auto;
font-size: 16px;
padding-top: 0px;
margin-top: 10px;
}



.s_Topics .T_desc ul.post-tags{
width: 88%;
margin-left: 0px;
margin-right: auto;
}
.s_Topics figure.mv {
flex-basis: 100%;
margin-bottom: 3em;
}
.s_Topics figure.mv img {
width: 100%;
height: auto;
display: block;
}

@media screen and (max-width: 767px) {
.s_Topics{
padding-top: 0px;
padding-bottom: 30px;
}
.s_Topics h1.subT{
font-size: 5.0vw;
padding-right: 0px;
}
.s_Topics .T_desc{
padding-bottom: 20px;
margin-bottom: 15px;
margin-top: 20px;
}
.s_Topics .T_desc p.date{
top: -20px;
font-size: 3vw;
}
.s_Topics .T_desc ul.post-tags{
width: 80%;
}
.s_Topics figure.mv {
margin-bottom: 2em;
}

}


/*記事を探す*/
.I_search {
background-color: #E8E9E9;
padding-top: 60px;
padding-bottom: 60px;
margin-bottom: 80px;
margin-top: 80px;
}
.I_search figure img{
width: 100%;
height: auto;
display: block;
}
@media screen and (max-width: 767px) {
.I_search {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 40px;
margin-top: 40px;
}
}



/*2カラム*/
.t_News {
display: grid;
gap: 50px;
grid-template-columns: 1fr 3.2fr;
}
.t_News .itemA {
}
.t_News .itemB {
}
/*一覧*/
.t_News.n_archive {
grid-template-columns: 1fr;
margin-top: 50px;
margin-bottom: 50px;
}

@media(max-width: 767px){
.t_News {
grid-template-columns: 1fr;
}
/*一覧*/
.t_News.n_archive {
margin-top: 30px;
margin-bottom: 30px;
}
}




/*新着投稿*/
ul.n_post {
display: flex;
flex-direction: column;
gap: 0px;
}
ul.n_post li.item {
background-color: #FFFFFF;
border-bottom: 1px solid #AAAAAA;
transition: all 0.3s;
padding-top: 10px;
padding-bottom: 10px;
}
ul.n_post li.item:first-child {
border-top: 1px solid #AAAAAA;
}
/*共通タグ表示用*/
ul.n_post li.item .post-tags {
margin-right: auto;
margin-left: 36%;
padding-bottom: 0px;
}

ul.n_post li.item .in_txt {
position: relative;
padding-top: 10px;
padding-bottom: 10px;
cursor: pointer;
}
ul.n_post li.item .in_txt .link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
/*ul.n_post li.item .in_txt:hover {
background-color: rgba(241,241,241,0.50);
}*/
ul.n_post li.item .in_txt:hover h3 {
text-decoration: underline;
}
ul.n_post li.item .in_txt {
display: grid;
gap: 30px;
grid-template-columns: 0.8fr 1.5fr 4.5fr;
align-items: center;
gap: 20px;
}
ul.n_post li.item h3 {
font-size: 14px;
font-weight: normal;
line-height: 1.6em;
}
ul.n_post li.item p.date {
font-size: 13px;
}
ul.n_post li.item p.cat {
font-size: 11px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
padding-right: 10px;
border: 1px solid #888888;
line-height: 1.6em;
white-space: nowrap;
text-align: center;
display: block;
transition: all 0.3s;
background-color: #FFFFFF;
}
@media(max-width: 767px){
ul.n_post {
grid-template-columns: 1fr;
margin-bottom: 25px;
}
ul.n_post li.item {
}
ul.n_post li.item .in_txt {
grid-template-columns: 1.2fr 3fr;
gap: 10px;
}
ul.n_post li.item h3 {
font-size: 3.0vw;
}
ul.n_post li.item h3 {
grid-row: 2 / 3;
grid-column: 1 / 3;
}
ul.n_post li.item p.cat a {
font-size: 2.5vw;
display: inline-block;
}
/*共通タグ表示用*/
ul.n_post li.item .post-tags {
margin-left: 0px;
}
}