@charset "utf-8";

/*-----スタイルシート　1910--------------------------------------------*/
/*HTML5 Doctor Reset Stylesheet*/

@import url("rest.css");

/*-------------------------------------------------*/
/*全体設定*/

/*サイト固有の共通設定＝＝＝＝＝＝＝＝*/
:root{
--ac1:#edf257;
--ac2:#cc66E2;
--tx1:#462702;
--f-not:"Noto Sans JP", sans-serif;
--f-a1m:"A1 Mincho-loc", serif;
--f-hm3:"hiragino-mincho-pron", sans-serif;
--f-hk3:"hiragino-kaku-gothic-pron", sans-serif;
--f-ftu:"futura-pt", sans-serif;
--f-mak:"makinas-4-flat", sans-serif;
}
/*-------ローカルに置き換え-----------*/
@font-face {
font-family: 'A1 Mincho-loc';
src: url('../css/fonts/A-OTF-A1MinchoStd-Bold.otf') format('opentype');
font-weight: normal;
}
@font-face {
font-family: 'hiramin-loc';
src: url('../css/fonts/hiraminStdNW3.otf') format('opentype');
font-weight: normal;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}

/*＝＝＝＝＝＝＝＝*/


.sp_only { display:none;}
#wrapper {
width:100%;
font-family: var(--f-hk3);
font-size: 22px;
color: var(--tx1);
}
#contents {
width:100%;
margin:0 auto;
}
div[class$="_box"],section[class$="_box"]{
width: 1100px;
margin-left: auto;
margin-right: auto;
}
div,section {
justify-content: space-between;
flex-wrap: wrap;
}
p {
line-height: 1.5em;
letter-spacing: 0.06em;
}
article {
padding-bottom: 100px;
}



/*-------------------------------------------------*/
/*ヘッダー*/
header{
width: 100%;
min-width: 1100px;
position: relative;
}
header .hd_logo{
display: block;
width: 240px;
margin: 18px auto;
transition: 0.5s ease-in-out 0.1s;
}
header .hd_logo.active{
transform: translateX(min(-410px, calc(-50vw + 140px)));
}
header .hd_logo img{
width: 100%;
}
header .hd_mbtn{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 50px;
background: rgba(70,39,2,1);
border-radius: 50%;
transition: 0.5s ease-in-out 0.1s;
}
header .hd_mbtn.active{
right: 680px;
}
header .hd_mbtn img{
width: 100%;
}

.header_nav{
position: absolute;
right: 20px;
top: 13px;
display: flex;
align-items: center;
gap: 22px;
/* 収納アニメーション */
overflow: hidden;
max-width: 0; 
opacity: 0;
pointer-events: none; 
transition: max-width 0.5s ease-in-out 0.1s, opacity 0.3s ease-in-out 0.1s;
z-index: 10;
}
.header_nav.active{
max-width: 660px;
opacity: 1;
pointer-events: auto;
}
.header_nav .hdnav_a{
display: inline-block;
width: max-content;   
white-space: nowrap; 
font-size: 18px;
font-family: var(--f-a1m);
padding: 5px 4px 12px;
opacity: 1;
}
.header_nav.active .hdnav_a{
font-size: 18px;
position: relative;
}
.header_nav.active .hdnav_a::after{
position: absolute;
content: "";
width: 0px;
height: 1px;
background: var(--tx1);
opacity: 0;
bottom: 4px;
left: 50%;
transition: 0.2s ease-in-out;
}
.header_nav.active .hdnav_a:hover::after{
width: 95%;
opacity: 1;
left: 0;bottom: 4px;
}

.pagetop {
position: fixed;
z-index: 50;
right: 20px;
bottom: -150px;
text-align: center;
transition: 1.2s;

background: rgba(246,245,245,0.8);
border-radius: 15px;
width: 90px;
height: 125px;
cursor: pointer;
font-family: var(--f-a1m);
font-weight: 900;
padding-top: 56px;
font-size: 16px;
}
.pagetop::before {
background: url("../images/pagetop.webp") no-repeat center center;
background-size: contain;
position: absolute;
left: 5px;
top: 5px;
width: 80px;
height: 115px;
z-index: -10;
content: "";
}
.pagetop.act {
bottom: 20px;
}


/*-----スクロールアニメーション-----*/
.scr_act {
/*transition: 0.8s ease-in-out;*/
}
/*-------------------------------------------------*/
/*フッター*/


footer {
width: 100%;
min-width: 1100px;
position: relative;
background: #e9e7e5;
padding: 80px 0 45px;
overflow: hidden;
}
footer ul {
width: 1100px;
margin: 0 auto;
font-size: 20px;
}
footer ul li {
margin: 30px 0;
padding-left: 20px;
position: relative;
}
footer ul li a {
padding: 4px;
}
footer ul li a::after {
position: absolute;
content: "";
width: 12px;
height: 1px;
background: var(--tx1);
left: 0;
top: 11px;
border-radius: 3px;
transition: 0.15s ease-in-out;
}
footer ul li a:hover::after {
position: absolute;
content: "";
width: 10px;
height: 10px;
border-radius: 6px;
background: var(--tx1);
left: 1px;
top: 6px;
}
footer>div {
width: 1100px;
margin: 90px auto 0;
display: flex;
align-items: flex-end;
}
footer>div>img {
width: 320px;
}

#copyright {
text-align: center;
font-size: 14px;
font-family:var(--f-ftu);
margin-top: 50px;
}

/*-------------------------------------------------*/
/*コンテンツ*/

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　ローディング　◆◆*/
.loading-screen {
position: fixed;
inset: 0;
background: #ffffff;
display: flex;/**/
/*display: none; 編集時非表示　通常はflex*/
align-items: center;
justify-content: center;
z-index: 9999;
/*ディレイ後非表示■OPENING*/
animation: loadfix 1.0s ease-in-out 5.5s forwards ;
}
@keyframes loadfix {
0%   { opacity: 1; }
100%   { opacity: 0; z-index: -100; }
}

.loading-clip {
width: 100vw;
overflow: hidden; 
}

/* SVGのサイズ調整 */
.enon-logo {
  width: 170vw;
  max-width: none;
  display: block;
  position: relative;
  left: -35vw;
}

/* 線の見た目 */
#enon-path {
fill: none;
stroke: #ce1f3a;
stroke-width: 6.5;
stroke-linecap: round;
stroke-linejoin: round;
/* アニメーション用設定 */
stroke-dasharray: 3200;
stroke-dashoffset: 3200;
/*enonロゴパス動作■OPENING*/
animation: enon-draw 4.4s linear 0.8s forwards ;
}

@keyframes enon-draw {
0%   { stroke-dashoffset: 3200; }
94%   { stroke-dashoffset: 0; opacity: 1; }
100%   { stroke-dashoffset: 0; opacity: 0; }
}

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　TOP　◆◆*/

/*--////　main_visual　////--*/
#mainvisual{
width: 100%;
min-width: 1100px;
height: 95vh;
min-height: 700px;
position: relative;
background: #fff;
}
#mainvisual.subvisual{
width: 1100px;
margin: 0 auto;
height: 600px;
min-height: inherit;
}

#mainvisual img{
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
/*ディレイ後表示■OPENING*/
animation: bgFadeIn 1.8s ease 10.0s forwards;
position: absolute;
z-index: 0;
}
#mainvisual.subvisual img{
animation: bgFadeIn 0.8s ease 0.0s forwards;
}
@keyframes bgFadeIn{
  to { opacity: 1; }
}

/* h1 全体 */
.vtitle {
  font-feature-settings: initial;
  display: flex;
  justify-content: center;
  flex-flow: row-reverse;
  align-items: flex-start;
  font-family: var(--f-a1m);
  line-height: 1em;
  letter-spacing: 0.1em;
  white-space: nowrap;
  position:inherit;
  z-index: 1;
  top:50%;
  font-size: calc(3vh + 11px);
  transform: translateY(-51%);
}

/* 列（右・左） */
.vtitle .line {
  writing-mode: vertical-rl;
  display: inline-block;
  padding: 10px 5px;
  margin: 0 23px;
  background: rgba(0,0,0,0);
}

/* 各文字 */
.vtitle .char {
  display: inline;
  opacity: 0;
  transform: translateY(0.4em);
  animation: charIn 0.28s ease forwards;
  animation-delay: var(--d);
  margin: -1px auto;
}
/* 文字の出現 */
@keyframes charIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/*キャッチコピー文字色■OPENING*/
/*#mainvisual h1{
animation: titleInvert 1.7s ease 10.0s forwards;
}
@keyframes titleInvert{
to { color: #ffffff; }
}*/

/*キャッチコピー文字背景■OPENING*/
#mainvisual h1 .line{
animation: lineBgOn 2.2s ease 10.0s forwards;
}
@keyframes lineBgOn{
to { background: rgba(255,255,255,0.6); }
}

/* =========================
   ローディング一定時間内非表示
========================= */

/* 2回目以降はオープニング演出を無効化 */
.no-opening .loading-screen{
  display:none !important;
}
/* mainvisual画像ディレイ無効 */
.no-opening #mainvisual img{
  animation:none !important;
  opacity:1 !important;
}
/* タイトル文字アニメ無効 */
.no-opening .vtitle .char{
  animation:none !important;
  opacity:1 !important;
  transform:none !important;
}
/* 背景ライン背景アニメ無効 */
.no-opening #mainvisual h1 .line{
  animation:none !important;
  background: rgba(255,255,255,0.6) !important;
}

/* =========================
   背景スライダー
========================= */
.mv-slider{
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}

/* スライド基本状態：右待機 */
.mv-slide{
  position:absolute;
  inset:0;
  transform: translateX(100%);
  transition: transform 1.6s ease;
  will-change: transform;
}

/* 表示中 */
.mv-slide.is-active{
  transform: translateX(0);
  z-index:2;
}

/* 左へ退場 */
.mv-slide.is-exit{
  transform: translateX(-100%);
  z-index:1;
}

.mv-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* =========================
   ナビゲーションボタン
========================= */
.mv-btn{
  position:absolute;
  top:50%;
  width:27px;
  height:27px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:3;
  transform: translateY(-50%) rotate(45deg);
  opacity:0.5;
}

/* 図形（右・上ボーダー） */
.mv-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-top:5px solid #fff;
  border-right:5px solid #fff;
}

.mv-btn.prev{
  left:30px;
  transform: translateY(-50%) rotate(-135deg);
}

.mv-btn.next{
  right:30px;
  transform: translateY(-50%) rotate(45deg);
}

/* =========================
   インジケーター
========================= */
.mv-dots{
  position:absolute;
  bottom:7px;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:4px;
  z-index:3;
}
.mv-dots span{
  width:80px;
  height:3px;
  border-radius:0%;
  background:rgba(255,255,255,0.4);
}
.mv-dots span.is-active{
  background:#fff;
}

/* =========================
   開始前ロック
========================= */
#mainvisual.is-slider-locked .mv-slider{
  pointer-events:none;   /* スワイプ無効 */
}
#mainvisual.is-slider-locked .mv-btn{
  pointer-events:none;   /* ボタン無効（表示は維持） */
  opacity:0.4;
}


/*--////　top_omoi　////--*/
#top_omoi {
background: url("../images/top_omoi_bg.webp");
background-size: cover;
background-attachment: fixed;
width: 100%;
min-width: 1100px;
padding: 100px 0;
}
#top_omoi p {
font-family: var(--f-hm3);
text-align: center;
line-height: 2.5em;
letter-spacing: 0.1em;

animation: fade-up linear forwards;
animation-timeline: view();
animation-range: cover 24% exit 100%;
opacity: 0;
transform: translateY(70px);
}

@keyframes fade-up {
0% {
opacity: 0;
transform: translateY(70px);
}
30% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 1;
transform: translateY(-20px);
}
}


#top_omoi a {
display: block;
width: 200px;
font-family: var(--f-hm3);
text-align: center;
margin: 50px auto 0;
padding: 6px 0;
font-size: 22px;
position: relative;
}
#top_omoi a::after {
position: absolute;
content: "";
width: 13px;
height: 13px;
border-width: 1px 1px 0 0;
border-color: var(--tx1);
border-style: solid;
transform: rotate(45deg);
right: 13px;
top: 15px;
transition: 0.2s ease-in-out;
}

#top_omoi a:hover::after {
right: 0px;
}
#top_omoi a strong {
font-size: 30px;
font-weight: 300;
}

/*--////　item　////--*/
#item {
padding: 100px 0;
}
#item h2 {
font-size: 40px;
text-align: center;
font-family: var(--f-a1m);
margin-bottom: 60px;
letter-spacing: 0.05em;
}
#item.sub_itemlink h2 {
margin-bottom: 20px;
}
#item.sub_itemlink > p {
text-align: center;
margin-bottom: 40px;
}

.item_set {
width: calc(50% + 450px);
min-width: 1100px;
margin: 0 auto;
display: flex;
gap:60px 0px;
flex-wrap: wrap;
}

.top_itemlink .item_read p {/*topのみ*/
font-size: 17px;
letter-spacing: 0.01em;
line-height: 1.4em;
padding: 100px 0 11px;
min-height: 283px;
}
.top_itemlink .item_read p strong {/*topのみ*/
display: block;
margin-bottom: 3px;
}
.sub_itemlink .item_read {/*subのみ*/
display: none;
}
.item_a {
display: block;
width: calc(34% - 30px);
position: relative;
}
.top_itemlink .item_a {/*topのみ*/
border-top: 2px solid var(--tx1);
}
.item_naiyo {
overflow: hidden;
position: relative;
}
.top_itemlink .item_naiyo {/*topのみ*/
height: 360px;
}
.sub_itemlink .item_naiyo {/*subのみ*/
height: 320px;
}
.item_naiyo img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
transition: 0.5s ease-in-out 0.1s;
transform: scale(1.01);
transform-origin: center center;
/*display: none;*/
}
.item_a:hover .item_naiyo img {
transform: scale(1.09);
transform-origin: center center;
}
.item_set h3{
position: absolute;
font-family: var(--f-a1m);
font-size: 28px;
letter-spacing: 0.1em;
line-height: 1.2em;
z-index: 2;
}
.item_set h3 span{
display: block;
text-align: center;
position: absolute;
right: -10px;
top: -5px;
width: 80px;
font-size: 18px;
line-height: 1.1em;
background: var(--ac1);
color: var(--tx1);
padding: 20px 0 20px;
letter-spacing: 0.05em;
border-radius: 50%;
}
.top_itemlink h3{/*topのみ*/
left: 5px;
top: 30px;
width: 100%;
}
.top_itemlink h3 span{/*topのみ*/
right: 5px;
top: -20px;
}
.sub_itemlink h3{/*subのみ*/
color: #fff;
left: 20px;
top: 15px;
filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.99));
width: calc(100% - 40px);
}
.sub_itemlink h3 span{/*subのみ*/
right: -10px;
top: -5px;
}
.item_naiyo ul{
position: absolute;
font-family: var(--f-hk3);
color: #fff;
font-size: 13px;
letter-spacing: 0.1em;
line-height: 1.6em;
z-index: 2;
left: 20px;
bottom: 70px;
filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.99));
}
.top_itemlink .item_naiyo ul {/*topのみ*/
display: none;
}

.item_naiyo h4{
position: absolute;
font-family: var(--f-mak);
letter-spacing: 0.04em;
color: #fff;
font-size: 32px;
z-index: 2;
left: 18px;
bottom: 18px;
filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.99));
}
.item_naiyo div.itm_more{
position: absolute;
font-family: var(--f-ftu);
color: var(--tx1);
font-size: 24px;
z-index: 2;
right: 0px;
bottom: 14px;
padding: 8px 0px 8px 16px;
width: 115px;
background: rgba(255,255,255,0.6);
}
.item_naiyo div.itm_more::after{
position: absolute;
content: "";
background: var(--ac1);
width: 7px;
height: 100%;
top: 0;
left: 0;
}
.item_naiyo div.itm_more::before{
position: absolute;
content: "";
width: 8px;
height: 8px;
border-width: 1px 1px 0 0;
border-color: var(--tx1);
border-style: solid;
transform: rotate(45deg);
right: 16px;
top: 16px;
transition: 0.2s ease-in-out;
}
.item_a:hover .item_naiyo div.itm_more::before {
right: 9px;
}
/*--////　social　////--*/
#social {
display: flex;
justify-content: center;
}
#social a {
background: rgba(233,231,229,0);
padding: 11px 13px;
transition: 0.3s;
border-radius: 5px;
}
#social a:hover {
background: rgba(233,231,229,1);
border-radius: 35px;
}
#social a i {
font-size: 50px;
}


/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　Item　◆◆*/

#item_name {
padding: 30px 0 10px;
width: 1100px;
margin: 0 auto;
}
#item_name h1 {
font-family: var(--f-a1m);
font-size: 40px;
letter-spacing: 0.02em;
}
#item_name h1 span {
color: var(--tx1);
font-size: 24px;
margin-bottom: 40px;
background: var(--ac1);
padding: 8px 20px 13px;
display: inline-block;
vertical-align: middle;
margin-bottom: 9px;
margin-left: 15px;
border-radius: 25px;
}

/* ===== item slider base ===== */
#itemslide {
width: 1100px;
margin: 0 auto;
padding-bottom: 60px;
}

.itmsld { width:100%; }

.itmsld_viewarea{
position: relative;
width: 100%;
overflow: hidden;
}

.itmsld_stage{
position: relative;
width: 100%;
height: 100%;
}

/* メイン画像 */
.itmsld_slide{
position:absolute;
inset:0;
opacity:0;
transition: opacity 0.3s ease;/*切替時間*/
pointer-events:none;
}
.itmsld_slide.is-active{
opacity:1;
pointer-events:auto;
}
.itmsld_slide img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* 矢印ボタン */
.itmsld_btn{
position:absolute;
top:50%;
width:30px;
height:30px;
background:none;
border:none;
cursor:pointer;
z-index:5;
opacity:0.7;
transform: translateY(-50%) rotate(45deg);
}
.itmsld_btn::before{
content:"";
position:absolute;
inset:0;
border-top:5px solid rgba(255,255,255,0.7);
border-right:5px solid rgba(255,255,255,0.7);
}
.itmsld_btn.prev{
left:12px;
transform: translateY(-50%) rotate(-135deg);
}
.itmsld_btn.next{
right:12px;
transform: translateY(-50%) rotate(45deg);
}

/* サムネ */
.itmsld_thumarea{
margin-top: 12px;
display:flex;
gap:8px;
}

.itmsld_thum{
width:72px;
height:72px;
padding:0;
border:0;
background:none;
cursor:pointer;
opacity:0.6;
flex: 0 0 auto;
}
.itmsld_thum.is-active{ opacity:1; }

.itmsld_thum img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}

/* PC：メインの比率を固定（例） */
.itmsld_viewarea{
  height: 600px;
}
/* PC：サムネ中央揃 */
.itmsld_thumarea{
  justify-content:center;
}
/* ===== ここまでitem slider base ===== */





#item_spec {
width: 100%;
margin: 0 auto 70px;
min-width: 1100px;
background: url("../images/top_omoi_bg.webp");
background-size: cover;
background-attachment: fixed;
padding:60px calc(50% - 550px) 50px;
}
#item_spec h2 {
font-size: 38px;
margin-bottom: 40px;
font-family: var(--f-ftu);
font-weight: 700;
}
#item_spec dl {
width: 1100px;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
line-height: 1.4em;
font-size: 19px;
}
#item_spec dl p {
width: 1100px;
margin-bottom: 20px;
position: relative;
}
#item_spec dl dt {
width: 180px;
margin-bottom: 20px;
position: relative;
}
#item_spec dl dt:not(:first-child)::after,
#item_spec dl p:not(:first-child)::after{
border-top: 1px solid var(--tx1);
width: 1100px;
content: "";
height: 1px;
position: absolute;
left: 0; top: -10px;
opacity: 0.3;
}
#item_spec dl dd {
width: 900px;
margin-bottom: 20px;
}

#item_info {
width: 1100px;
margin: 0 auto;
padding: 0px 0 70px;
}

#item_info h2 {
font-family: var(--f-a1m);
font-size: 34px;
margin-bottom: 30px;
text-align: center;
}
.item_card_set {
display: flex;
align-items: stretch;
}
.item_card {
width: 24%;
display: flex;
justify-content: center;
gap:1.32%;
margin-bottom: 15px;
background: #fff;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.09));
margin-bottom: 25px;
}
.item_card > img {
width: 100%;
aspect-ratio: 1.2 / 1;
object-fit: cover;
object-position: center 65%;
margin-bottom: 8px;
}

.item_card  h3 {
font-family: var(--f-a1m);
font-size: 24px;
width: 100%;
margin-bottom: 14px;
padding: 0 15px;
}
.item_card h4 {
font-size: 13px;
width: 130px;
text-align: right;
width: 100%;
margin-bottom: 12px;
padding: 0 15px;
}
.item_card h4 strong {
font-family: var(--f-mak);
letter-spacing: 0.04em;
font-size: 22px;
}
.item_card > p {
width: 100%;
font-size: 15px;
line-height: 1.3em;
padding: 0 15px 16px;
}
.item_card a {
background: var(--ac1);
border-radius: 10px;
padding: 9px 25px;
display: flex;
align-items: center;
justify-content: center;
gap:5px;
margin-bottom: 20px;
}
.item_card a img {
width: 22px;
}
.item_card a p {
font-size: 17px;
}




#item_note {
padding: 0px 0 50px;
width: 1100px;
margin: 0 auto;
display: flex;
flex-flow: column;
gap:70px;
}
.item_note_pce {
display: flex;
}
.item_note_pce img {
width: 520px;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.item_note_pce > div {
width: 520px;
}
.item_note_pce > div h2 {
font-family: var(--f-a1m);
font-size: 33px;
letter-spacing: 0.1em;
margin-bottom: 30px;
margin-top: 8px;
position: relative;
}
.item_note_pce > div h2::after {
position: absolute;
width: 8px;
content: "";
background: var(--ac1);
height: 52px;
left: -4px;top: -8px;
z-index: -1;
}
.item_note_pce > div p {
}



#item_note {
padding: 0px 0 50px;
width: 1100px;
margin: 0 auto;
display: flex;
flex-flow: column;
gap:70px;
}
.item_note_pce {
display: flex;
}
.item_note_pce img {
width: 520px;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.item_note_pce > div {
width: 520px;
}
.item_note_pce > div h2 {
font-family: var(--f-a1m);
font-size: 33px;
letter-spacing: 0.1em;
margin-bottom: 30px;
margin-top: 8px;
position: relative;
}
.item_note_pce > div h2::after {
position: absolute;
width: 8px;
content: "";
background: var(--ac1);
height: 52px;
left: -4px;top: -8px;
z-index: -1;
}
.item_note_pce > div p {
}

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　サブページ共通　◆◆*/
#subvisual {
width: 100%;
min-width: 1100px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
#subvisual h1 {
font-family: var(--f-a1m);
font-size: 32px;
text-align: center;
letter-spacing: 0.09em;
}
#subvisual h1 span {
display: block;
position: relative;
margin-bottom: 70px;
font-size: 55px;
}
#subvisual h1 span::after {
position: absolute;
content: "";
background: var(--tx1);
width: 40px;
height: 8px;
left: calc(50% - 20px);
bottom: -43px;
}
#subvisual h1 strong {
font-size: 42px;
display: inline-block;
vertical-align: bottom;
transform: translateY(-2px);
margin-top: -10px;
}


/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　想い　◆◆*/

.omoi_sub {
background: url("../images/omoi_sub.webp");
background-size: cover;
background-position: center center;
}

/*--- omoi_1 ----*/
#omoi_1 {
background: url("../images/omoi_bg.jpg");
padding: 100px 0;
min-width: 1100px;
overflow: hidden;
}
#omoi_1 > div {
background: url("../images/omoi_bgkami.webp");
width: calc(50% + 550px);
background-size: cover;
padding: 100px 80px 100px calc(50% - 550px);
position: relative;
z-index: 1;
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.4));
}
#omoi_1 > div img {
position: absolute;
z-index: 2;
}
#omoi_1 > div img:first-of-type {
width: calc(15vw + 210px);
left: calc(20vw - 450px);
top: -70px;
transform: translateY(-55%);
}
#omoi_1 > div img:last-of-type {
width: calc(15vw + 300px);
right: calc(-20vw + 200px);
bottom: -40px;
transform: translateY(55%);
}

#omoi_1 > div h2 {
font-family: var(--f-a1m);
font-size: 52px;
line-height: 1.3em;
margin-bottom: 50px;
letter-spacing: 0.09em;
}
#omoi_1 > div p {
line-height: 2.8em;
}

/*--- omoi_2 ----*/
#omoi_2 {
width: 100%;
min-width: 1100px;
overflow: hidden;
position: relative;
padding: 100px 0;
}
#omoi_2 img {
width: calc(50% + 500px);
position: absolute;
left: calc(50% - 550px);
top: 360px;
transform: translateY(-90%);
}
#omoi_2 div {
width: 1100px;
margin: 0 auto;
}
#omoi_2 div h2 {
font-family: var(--f-a1m);
font-size: 52px;
line-height: 1.3em;
margin-bottom: 100px;
letter-spacing: 0.09em;
}
#omoi_2 div p {
line-height: 2.8em;
}

/*--- omoi_3 ----*/
#omoi_3 {

}
.omoi_3tx {
background: url("../images/omoi_syoku.webp");
background-size: cover;
position: relative;
z-index: 1;
padding: 100px 0;
position: relative;
color: #fff;
display: flex;
justify-content: center;
gap:100px;
width: 100%;
min-width: 1100px;
}
.omoi_3tx::after {
position: absolute;
content: "";
width: 100%;
height: 100%;
background: linear-gradient(to right,#bbafa2 0%,#bbafa2 33%,#462702 100%);
mix-blend-mode: multiply;
opacity: 0.9;
z-index: 2;
top: 0;left: 0;
}
.omoi_3tx h2 {
writing-mode: vertical-rl;
font-family: var(--f-a1m);
font-feature-settings: "vert";
font-size: 52px;
line-height: 1.3em;
position: relative;
z-index: 3;
}
.omoi_3tx p {
width: 800px;
line-height: 2.8em;
position: relative;
z-index: 3;
}
.omoi_3img {
width: 100%;
min-width: 1100px;
height: 250px;
position: relative;
overflow: hidden;
}
.omoi_3img img {
width: calc(126vw / 5);
min-width: 275px;
height: 250px;
object-fit: cover;
position: absolute;
animation: syoku_sld 20s linear infinite;
}
@keyframes syoku_sld {
0% {transform: translateX(0%);}
19.97% {transform: translateX(-100%);opacity: 1;}
19.98% {transform: translateX(-100.1%);opacity: 0;}
19.99% {transform: translateX(400%);opacity: 0;}
20% {transform: translateX(400%);opacity: 1;}
100% {transform: translateX(0%);opacity: 1;}
}
.omoi_3img img:nth-of-type(1) {
animation-delay: -20s;
}
.omoi_3img img:nth-of-type(2) {
animation-delay: -16s;
}
.omoi_3img img:nth-of-type(3) {
animation-delay: -12s;
}
.omoi_3img img:nth-of-type(4) {
animation-delay: -8s;
}
.omoi_3img img:nth-of-type(5) {
animation-delay: -4s;
}

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　ご利用ガイド　◆◆*/

.guide_sub {
background: url("../images/guide_sub.webp");
background-size: cover;
background-position: center center;
}
#gid_set {
width: 1100px;
margin: 0 auto;
padding: 100px 0 50px;
}
#gid_set>div:not(:first-child) {
margin-top: 80px;
}
#gid_set h2 {
font-size: 32px;
font-family: var(--f-a1m);
margin-bottom: 35px;
}
#gid_set h2 span {
display: inline-block;
font-family: var(--f-ftu);
font-weight: 800;
font-size: 45px;
vertical-align: middle;
margin-top: -10px;
margin-right: 10px;
position: relative;
}
#gid_set h2 span::after {
position: absolute;
z-index: -1;
content: "";
width: 70px;
height: 70px;
border-radius: 50%;
background: var(--ac1);
left: -24px;
top: -13px;
opacity: 0.5;
}
#gid_set p {
padding-left: 30px;
line-height: 2.1em;
font-size: 19px;
}
#gid_set p:not(:first-child) {
margin-top: 15px;
}
#gid_set ul {
padding-left: 30px;
line-height: 2.1em;
font-size: 19px;
}
#gid_set ul:not(:first-child) {
margin-top: 15px;
padding-left: 50px;
}
#gid_set ul.deg {
list-style: decimal;
}
#gid_set ul.dot {
list-style: circle;
}

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　特定商取引法に基づく表記　◆◆*/

.law_sub {
background: url("../images/law_sub.webp");
background-size: cover;
background-position: center center;
}
#law_set {
width: 1100px;
margin: 0 auto;
padding: 100px 0;
}
#law_set table {
width: 100%;
line-height: 1.8em;
font-size: 19px;
border-collapse: collapse;
}
#law_set table th {
padding: 20px;
border: 1px solid #dbd8d5;
text-align: center;
background: #f4f3f3;
}
#law_set table td {
padding: 20px;
border: 1px solid #e9e7e5;
}

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　よくある質問　◆◆*/

.faq_sub {
background: url("../images/faq_sub.webp");
background-size: cover;
background-position: center center;
}
#faq_set {
width: 1000px;
margin: 0 auto;
padding: 100px 0;
}

.faq-item {
  border-bottom: 1px solid #ddd;
}

/* summaryのデフォルト三角を消す */
.faq-question {
list-style: none;
display: flex;
align-items: center;
cursor: pointer;
padding: 20px 15px 18px;
}
.faq-question::-webkit-details-marker {
display: none;
}
.faq-question .q {
margin-right: 30px;
font-weight: bold;
color: #4f689f;
}
.faq-question h2 {
flex: 1;
margin: 0;
font-size: 20px;
}
.faq-question .icon {
transition: transform 0.2s ease;
font-size: 16px;
}
/* 回答 */
.faq-answer {
padding: 5px 15px 20px;
display: flex;
align-items: flex-start;
justify-content: space-between;
}
.faq-answer .a {
font-weight: bold;
width: 1.2em;
padding: 6px 0;
color: #bf4e6b;
}
.faq-answer p {
width: calc(100% - 3em);
font-size: 20px;
}

/* 開いたとき */
.faq-item[open] .icon {
transform: rotate(180deg); /* ▼ → ▲ */
}

/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　問い合わせ　◆◆*/

.contact_sub {
background: url("../images/contact_sub.webp");
background-size: cover;
background-position: center center;
}
#contact_fld {
width: 820px;
padding: 100px 0;
margin: 0 auto;
}
.contact_read {
margin-bottom: 50px;
}
.contact_read > div {
display: flex;
margin-bottom: 50px;
}
.contact_read > div a {
width: 49%;
background: #fff;
border: 2px solid var(--ac1);
text-align: center;
padding: 30px 0;
border-radius: 10px;
transition: 0.5s ease-in-out;
letter-spacing: 0.09em;
position: relative;
}
.contact_read > div a::after {
position: absolute;
content: "";
width: 12px;
height: 12px;
border-width: 1px 1px 0 0;
border-style: solid;
border-color: var(--tx1);
transform: rotate(45deg);
right: 21px;
top: 35px;
transition: 0.4s ease-in-out;
}
.contact_read > div a:hover {
background: var(--ac1);
}
.contact_read > div a:hover::after {
right: 14px;
}
.contact_read p:first-of-type {
margin-bottom: 10px;
font-size: 20.5px;
}
.contact_read p:last-of-type {
font-size: 17px;
}

.contact_in {
}
.contact_in form {
width: 800px;
margin: 0 auto;
display: flex;
flex-flow: column;
gap:28px;
}
.contact_in form div {
display: flex;
}
.contact_in form div label {
padding: 15px;
width: 190px;
text-align: right;
font-size: 19px;
}
.contact_in form input,
.contact_in form textarea{
width: 590px;
font-size: 20px;
padding: 8px 5px;
border: 1px solid #bbb;
border-radius: 5px;
}
.contact_in form select{
background: #e3dfd9;
width: 590px;
font-size: 20px;
padding: 8px 15px;
border-radius: 5px;
border: none;
}
.selectdiv {
position: relative;
}
.selectdiv p{
position: absolute;
right: 20px;
top: 13px;
font-size: 16px;
}
.formbotarea {
display: flex;
flex-flow: raw;
justify-content: center;
align-items: center;
gap:10px;
margin-top: 30px;
}
.formbotarea p {
font-size: 17px;
width: 100%;
text-align: center;
}
.formbotarea .lnkbott {
width: 400px;
background: var(--ac1);
text-align: center;
padding: 20px 0;
border-radius: 10px;
transition: 0.1s ease-in-out;
letter-spacing: 0.09em;
position: relative;
border: none;
font-size: 17px;
}
.formbotarea .lnkbott_op {
background: #ddd;
}
.formbotarea .lnkbott:hover {
opacity: 0.8;
}
.formbotarea .lnkbott::after {
position: absolute;
content: "";
width: 12px;
height: 12px;
border-width: 1px 1px 0 0;
border-style: solid;
border-color: var(--tx1);
transform: rotate(45deg);
right: 21px;
top: 26px;
transition: 0.4s ease-in-out;
}

.formbotarea .lnkbott:hover::after {
right: 14px;
}

/*◆◆　フォーム　◆◆*/
#formWrap {
width: 900px;
padding: 180px 0;
margin: 0 auto;
}
#formWrap h4 {
margin-bottom: 30px;
}
.errmss {
color: #b64c67;
margin-bottom: 50px;
}
.formTable {
border-collapse: collapse;
margin: 30px auto 0;
}
.formTable th,.formTable td {
border: 1px solid #aaa;
padding: 10px 15px;
}