/*=========================================================
#
# index
# 01：大枠設定
#   01-01：リセット設定
#   01-02：オープニングオーバーレイ
#   01-03：コンテンツエリア大枠
# 02：左側画像部分
#   02-01：スライダー
#   02-02：ページャー（ドット）
# 03：右側部分
#   03-01：右側大枠
#   03-02：ヘッダーエリア
# 04：ナビゲーション
#   04-01：ナビゲーションエリア基本設定
#   04-02：ドロワーオープン時オーバーレイ
#   04-03：ドロワー本体
#   04-04：閉じボタン
#   04-05：ドロワー内部
# 05：各セクション
#   05-01：introduction
#   05-02：profile（EkoiXima紹介）
#   05-03：汎用 .slide-in-h2
#   05-04：piapro
#   05-05：about
#   05-06：entry
#   05-07：contents
#   05-08：goods
#   05-09：notice
#   05-10：Keyvisual
#   05-11：footer
#   10：スマホ設定
# 06：汎用アニメーション
#   06-01：.fade-slide-in
#   06-02：.fade-up
#   06-03：.fade-down
#   06-04：.news_list
#   06-05：#page-top
# 07：Goodsページ
#   07-01：.fade-slide-in
#
=========================================================*/

/*=========================================================

　01：大枠設定

=========================================================*/
/*---------------------------------------------------------

　01-01：リセット設定

---------------------------------------------------------*/
*, *::before, *::after{
margin:0;
padding:0;
box-sizing:border-box;
}
:root{
--c-teal:  #00b8a9;
--c-pink:  #e8005a;
--c-bg:    #f4f2f0;
--c-dark:  #1a1a1a;
--c-mid:   #c8c4be;
--c-text:  #000000;
--c-muted: #888;
--f-jp:    'Noto Sans JP', sans-serif;
--f-min:   'Shippori Mincho', serif;
}
html, body{
height:100%;
overflow:hidden;
}
body{
background:var(--c-bg);
font-family:var(--f-jp);
font-weight:300;
color:var(--c-text);
}
.pc{
display:block !important;
}
.sp{
display:none !important;
}

/*---------------------------------------------------------

　01-02：オープニングオーバーレイ

---------------------------------------------------------*/
#opening{
position:fixed;
inset:0;
z-index:500;
pointer-events:none;
}
#checker-wrap{
position:absolute;
inset:0;
overflow:hidden;
}
.cell-dark-wrap{
position:absolute;
overflow:hidden;
z-index:1;
}
.cell-dark-wrap.gone{
visibility:hidden;
transition:visibility 0s linear 1.1s;
}
.cell-dark{
width:100%;
height:100%;
background:#F7F6F6;
transition:transform 1.1s cubic-bezier(0.4, 0, 0.6, 1);
}
.cell-dark-wrap.gone .cell-dark{
transform:translateX(-120px);
}
.cell-light{
position:absolute;
background:#FFFFFF;
z-index:2;
transition:transform 1.9s cubic-bezier(0.16, 1, 0.3, 1),
		  opacity  1.9s ease;
}
.cell-light.gone{
transform:translateY(-28px);
opacity:0;
}
#logo-overlay{
position:absolute;
inset:0;
display:flex;
align-items:center;
justify-content:center;
z-index:10;
opacity:0;
animation:logoFadeIn 1.0s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}
#logo-overlay.fade-out{
animation:none;
transition:opacity 0.9s ease;
opacity:0 !important;
}
#logo-overlay img{
width:720px;
height:240px;
object-fit:contain;
display:block;
/* 白いベタ背景 */
background:#ffffff;
padding:12px 36px;
box-sizing:border-box;
}
@keyframes logoFadeIn{
  from{ opacity:0; transform:translateY(12px); }
  to  { opacity:1; transform:translateY(0); }
}

/*---------------------------------------------------------

　01-03：コンテンツエリア大枠

---------------------------------------------------------*/
#container{
display:flex;
height:100svh;
overflow:hidden;
}

/*=========================================================

　02：左側画像部分

=========================================================*/
#left-panel{
width:min(46%, 80.4svh);
flex-shrink:0;
position:relative;
overflow:hidden;
background:#efeae7;
}

/*---------------------------------------------------------

　02-01：スライダー

---------------------------------------------------------*/
#slider{
list-style:none;
position:absolute;
inset:0;
touch-action:pan-y;
user-select:none;
}
.slide{
position:absolute;
inset:0;
opacity:0;
transition:opacity 0.7s ease;
}
.slide.active{
opacity:1;
}
.slide img{
width:100%;
height:100%;
object-fit:contain;
object-position:top center;
display:block;
pointer-events:none;
}

/*---------------------------------------------------------

　02-02：ページャー（ドット）

---------------------------------------------------------*/
/* #left-panel内に絶対配置 */
.slider-dots{
list-style:none;
position:absolute;
bottom:10px;
left:10px;
display:flex;
gap:8px;
z-index:10;
}
.slider-dot{
width:8px;
height:8px;
border-radius:50%;
background:#333333;
cursor:pointer;
transition:background 0.3s ease, transform 0.3s ease;
}
.slider-dot.active{
background:#00B1A6;
transform:scale(1.25);
}

/*=========================================================

　03：右側部分

=========================================================*/
/*---------------------------------------------------------

　03-01：右側大枠

---------------------------------------------------------*/
main{
flex:1;
overflow-y:auto;
overflow-x:hidden;
background:var(--c-bg);
scrollbar-width:thin;
scrollbar-color:var(--c-mid) transparent;
font-family:"Noto Serif JP", serif;
font-optical-sizing:auto;
font-weight:400;
font-style:normal;
}
main::-webkit-scrollbar{
width:4px;
}
main::-webkit-scrollbar-track{
background:transparent;
}
main::-webkit-scrollbar-thumb{
background:var(--c-mid);
border-radius:2px;
}

/*---------------------------------------------------------

　03-02：ヘッダーエリア

---------------------------------------------------------*/
header{
background:url('../img/opening_bg.png') left top no-repeat #fff;
background-size:cover;
clip-path:polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
padding:60px 40px 160px;
position:relative;
z-index:1;
margin-bottom:-80px;
}
header h1{
text-align:center;
max-width:85%;
text-shadow:0 0 15px #fff;
margin:0 auto 20px auto;
padding:0 0 10px 0;
filter:drop-shadow(0px 6px 20px rgba(255,255,255,1));
position:relative;
}
/* ぼやっとした白地 */
/*
header h1::before{
content:'';
position:absolute;
inset:0px 0px;
background:radial-gradient(ellipse at center, rgba(255,255,255,1.0) 90%, rgba(255,255,255,0.6) 65%, rgba(255,255,255,0) 85%);
pointer-events:none;
z-index:-1;
width:100%;
}
*/
header h1::before{
content:'';
position:absolute;
inset:0px 0px;
background:url('../img/main_logo_bg.png') center / cover no-repeat;
pointer-events:none;
z-index:-1;
width:100%;
}
header h1 img{
width:100%;
height:auto;
display:block;
position:relative;
z-index:1;
}
header p{
text-align:center;
max-width:80%;
margin:0 auto;
padding:0 0 30px 0;
filter:drop-shadow(0 0 14px rgba(255,255,255,0.9))
       drop-shadow(0 0 30px rgba(255,255,255,0.6));
position:relative;
z-index:1;
}
/* ぼやっとした白地 */
header p::before{
content:'';
position:absolute;
inset:-40px -60px;
background:radial-gradient(ellipse at center, rgba(255,255,255,0.95) 30%, rgba(255,255,255,0.6) 65%, rgba(255,255,255,0) 85%);
pointer-events:none;
z-index:-1;
}
header p img{
width:100%;
height:auto;
display:block;
position:relative;
z-index:1;
}
header .news{
background:url('../img/news_bg.png') left top no-repeat;
background-size:690px 200px;
width:690px;
height:200px;
margin:0px auto 60px auto;
padding:20px;
position:relative;
z-index:1;
}
header .news dl{
background:#000000;
color:#fff;
height:160px;
display:flex;
align-items:center;
align-content:center;
justify-content:space-between;
margin:0px 0px 50px 0px;
}
header .news dt{
width:95px;
height:160px;
font-size:22px;
color:#fff;
text-align:center;
display:flex;
align-items:center;
align-content:center;
border-right:1px solid #5e6265;
padding:0px 10px 0px 0px;
}
header .news dd{
width:580px;
}
header .news dd ul{
line-height:2.0;
padding:0px 0px 0px 15px;
}
header .news .news_list{
height:160px;
max-height:160px;
overflow-y:scroll;
overflow-x:hidden;
box-sizing:border-box;
scrollbar-width:thin;
scrollbar-color:var(--c-mid) transparent;
}
header .news .news_list::-webkit-scrollbar{
width:4px;
}
header .news .news_list::-webkit-scrollbar-track{
background:transparent;
}
header .news .news_list::-webkit-scrollbar-thumb{
background:var(--c-mid);
border-radius:2px;
}
header .news time{
display:inline-block;
margin:0px 15px 0px;
}
header .news strong,
header .news span{
display:block;
text-align:center;
}

/*=========================================================

　04：ナビゲーション

=========================================================*/
/*---------------------------------------------------------

　04-01：ナビゲーションエリア基本設定

---------------------------------------------------------*/
.site-nav{
position:fixed;
top:0;
right:0;
z-index:150;
padding:0;
background:transparent;
}
.nav-btn{
width:70px;
height:70px;
background:#3e9da1;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:7px;
cursor:pointer;
border:none;
}
.nav-btn span{
display:block;
width:24px;
height:2px;
background:#fff;
}

/*---------------------------------------------------------

　04-02：ドロワーオープン時オーバーレイ

---------------------------------------------------------*/
#drawer-overlay{
position:fixed;
inset:0;
background:rgba(0, 0, 0, 0.45);
z-index:200;
opacity:0;
pointer-events:none;
transition:opacity 0.35s ease;
}
#drawer-overlay.open{
opacity:1;
pointer-events:all;
}

/*---------------------------------------------------------

　04-03：ドロワー本体

---------------------------------------------------------*/
#drawer{
position:fixed;
top:0;
right:0;
width:min(360px, 80vw);
height:100%;
background:var(--c-teal);
z-index:210;
display:flex;
flex-direction:column;
transform:translateX(100%);
transition:transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
overflow-y:auto;
}
#drawer.open{
transform:translateX(0);
}

/*---------------------------------------------------------

　04-04：閉じボタン

---------------------------------------------------------*/
.drawer-close{
position:absolute;
top:0;
right:0;
width:88px;
height:88px;
background:var(--c-teal);
border:none;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
}
.drawer-close::before,
.drawer-close::after{
content:'';
position:absolute;
width:18px;
height:1.5px;
background:#fff;
}
.drawer-close::before{ transform:rotate(45deg); }
.drawer-close::after { transform:rotate(-45deg); }

/*---------------------------------------------------------

　04-05：ドロワー内部

---------------------------------------------------------*/
nav.drawer-nav ul{
padding:130px 0px 0px 0px;
}
nav.drawer-nav ul li{
font-family:YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-optical-sizing:auto;
font-weight:200;
font-style:normal;
text-align:center;
}
nav.drawer-nav ul li a{
display:block;
color:#fff;
font-size:30px;
margin:0px 0px 40px 0px;
}
nav.drawer-nav ul li a.nolink{
pointer-events:none;
opacity:0.5;
}

/*=========================================================

　05-01：introduction

=========================================================*/
.introduction{
background-color:#efeae7;
position:relative;
font-size:16px;
display:grid;
grid-template-columns:35% 1fr;
grid-template-rows:auto auto;
align-items:start;
padding:80px 60px 80px 60px;
column-gap:40px;
row-gap:60px;
}
.introduction::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
background:url('../img/opening_bg.png') left top no-repeat;
background-size:cover;
background-position-x:left;
background-position-y:calc(-1 * var(--header-height, 0px));
clip-path:polygon(0 100%, 0 0, 100% 0);
pointer-events:none;
z-index:0;
}
.introduction figure{
grid-column:1;
grid-row:1;
margin-top:-160px;
align-self:start;
position:relative;
z-index:10;
opacity:0;
transform:translateY(-60px);
transition:opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.introduction figure.is-visible{
opacity:1;
transform:translateY(0);
}
.introduction figure img{
width:100%;
height:auto;
display:block;
}
.introduction > p:first-of-type{
grid-column:2;
grid-row:1;
align-self:center;
line-height:2.2;
letter-spacing:0.03em;
color:var(--c-text);
position:relative;
z-index:1;
}
.introduction > p:last-of-type{
grid-column:1 / 3;
grid-row:2;
line-height:2.2;
letter-spacing:0.03em;
padding-right:220px;
position:relative;
z-index:1;
}
.introduction::after{
content:'';
position:absolute;
right:70px;
bottom:140px;
width:180px;
aspect-ratio:1;
background:url("../img/star01.png") center / contain no-repeat;
mix-blend-mode:multiply;
pointer-events:none;
}

/*---------------------------------------------------------

　05-02：EkoiXima紹介（profileセクション）

---------------------------------------------------------*/
.profile{
background:#efeae7;
padding:0px 60px 160px 60px;
position:relative;
}

/* profile-frame：imgを背景として敷き、内側テキストを重ねる */
.profile .profile-frame{
position:relative;
width:100%;
container-type:inline-size;
container-name:profile-frame;
}
.profile .profile-frame__bg{
width:100%;
height:auto;
display:block;
transition:opacity 0.6s ease;
}
.profile .profile-frame__inner{
position:absolute;
top:10%;
left:9%;
right:9%;
bottom:12%;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content:center;
}
.profile h2{
margin:0 0 8cqi 0;
}
.profile h2 .char-wrap:nth-of-type(5){
margin:0 0 0 min(75px, 10cqi);
}
.profile h2 .char-wrap img{
width:min(75px, 10cqi);
height:min(75px, 10cqi);
object-fit:contain;
display:block;
margin:0;
}
.profile p{
background:url("../img/star02.png") center bottom no-repeat;
color:#fff;
font-size:clamp(11px, 1.3vw, 16px);
line-height:2.0;
padding:0px 0px 80px 0px;
}

/*=========================================================

　05-03：汎用 .slide-in-h2
　h2に class="slide-in-h2" を付けると可視領域で右からスライドイン
　改行位置は data-newline="インデックス番号" で指定（省略可）
　例：<h2 class="slide-in-h2" data-newline="3">

=========================================================*/
.slide-in-h2{
display:block;
font-size:0;
}
.slide-in-h2 .char-wrap{
display:inline-block;
overflow:hidden;
vertical-align:bottom;
font-size:0;
}
.slide-in-h2 .char-wrap img{
display:block;
width:auto;
height:auto;
transform:translateX(110%);
transition:transform 0.7s cubic-bezier(0.4, 0, 0.6, 1);
}
.slide-in-h2 .char-wrap.is-visible img{
transform:translateX(0);
}
.slide-in-h2 .char-wrap--newline{
display:block;
height:0;
}

/*---------------------------------------------------------

　05-04：初音ミク piapro

---------------------------------------------------------*/
.piapro{
background:#efeae7;
padding:30px 60px 160px 60px;
position:relative;
z-index:8;
margin:-1px 0px 0px 0px;
}
.piapro::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
background:#ffffff;
clip-path:polygon(0 100%, 100% 0, 100% 100%);
pointer-events:none;
z-index:0;
}
.piapro h2{
display:flex;
justify-content:center;
align-items:flex-end;
margin:0px auto 30px auto;
padding:0px;
}
.piapro h2 img{
display:inline-block;
margin:0px;
padding:0px;
}
.piapro h2 span{
display:inline-block;
font-size:45px;
line-height:1.5;
font-weight:600;
}
.piapro h3{
font-size:45px;
line-height:1.5;
font-weight:600;
margin:0px 0px 30px 0px;
}
.piapro h3 span{
font-size:35px;
}
.piapro p{
font-size:16px;
line-height:2.2;
position:relative;
z-index:1;
}

/*---------------------------------------------------------

　05-05：about

---------------------------------------------------------*/
.about{
background:#ffffff;
padding:60px 60px 160px 60px;
position:relative;
z-index:9;
margin:-1px 0px 0px 0px;
container-type:inline-size;
container-name:about-section;
}
.about::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
background:#efeae7;
clip-path:polygon(0 0, 100% 0, 0 100%);
pointer-events:none;
z-index:0;
}
.about h2{
margin:0 0 40px 40px;
padding-right:35%;
position:relative;
z-index:1;
white-space:nowrap;
overflow:hidden;
}
.about h2 .char-wrap img{
width:min(100px, 14cqi);
height:min(100px, 14cqi);
object-fit:contain;
}
.about figure{
position:absolute;
top:-130px;
right:60px;
width:min(256px, 32cqi);
z-index:10;
}
.about figure img{
width:100%;
height:auto;
display:block;
}
.about ul.top{
margin:0px 0px 50px 0px;
padding-right:35%;
}
.about ul.bottom{
margin:0px 0px 0px 330px;
}
.about ul li{
font-size:16px;
line-height:2.4;
}
.about ul li::before{
content:"◆";
color:#3d9da1;
}
.about ul.top li span{
display:block;
padding:0px 0px 0px 65px;
}
.about ul.bottom li span{
display:block;
padding:0px 0px 0px 18px;
}

/*---------------------------------------------------------

　05-06：entry

---------------------------------------------------------*/
.entry{
background:#efeae7;
padding:150px 60px 160px 60px;
position:relative;
z-index:10;
margin:-1px 0px 0px 0px;
container-type:inline-size;
container-name:entry-section;
}
.entry::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
background:#ffffff;
clip-path:polygon(0 0, 100% 0, 0 100%);
pointer-events:none;
z-index:0;
}
.entry::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
background:#ffffff;
clip-path:polygon(0 100%, 100% 0, 100% 100%);
pointer-events:none;
z-index:0;
}
.entry h2{
text-align:center;
margin:0px 0px 40px 0px;
position:relative;
z-index:1;
white-space:nowrap;
overflow:hidden;
}
/* h2内画像：最大100px・優先的に縮小（cqi大きめ） */
.entry h2 .char-wrap img{
width:min(100px, 14cqi);
height:min(100px, 14cqi);
}
.entry h3{
max-width:541px;
margin:0px auto 15px auto;
}
.entry h3 img{
width:100%;
}
.entry p{
font-size:16px;
line-height:2.2;
margin:0px 0px 50px 0px;
}
.entry p a{
text-decoration:underline;
color:#0000FF;
display:inline-block;
margin-left:82px;
}
.entry p a:hover{
opacity:0.7;
}
.entry p em{
font-style:normal;
font-size:1.2em;
color:#e5277d;
}
.entry p span{
color:#e6277e;
}
/* artwork03（左上） */
.entry figure.image01{
position:absolute;
top:-280px;
left:30px;
max-width:40%;
z-index:15;
}
.entry figure.image01 img{
width:100%;
height:auto;
display:block;
}
/* artwork04（右）：最大216px・h2縮小後に縮小開始 */
.entry figure.image02{
position:absolute;
top:180px;
right:10px;
width:min(216px, 30cqi);
max-width:none;
z-index:15;
}
.entry figure.image02 img{
width:100%;
height:auto;
display:block;
}
.tokuten h4{
font-size:24px;
font-weight:600;
text-align:center;
margin:0px 0px 20px 0px;
}
.tokuten h4 span{
display:block;
font-size:0.8em;
line-height:1.7;
padding:5px 0px 0px 0px;;
}
.tokuten > ul{
font-size:16px;
line-height:2.0;
margin:0px 0px 50px 0px;
}
.tokuten p.namecard{
text-align:center;
margin:0px 0px 20px 0px;
}
.tokuten dl{
margin:0px 0px 50px 0px;
}
.tokuten dt{
font-size:17px;
font-weight:700;
}
.tokuten dt::before{
content:"◆";
color:#e02a7d;
display:inline-block;
}
.tokuten dd ul{
list-style-type:disc;
font-size:16px;
}
.tokuten dd ul li{
list-style-type:disc;
line-height:2.2;
font-size:16px;
margin:0px 0px 0px 22px;
}
.tokuten dd ul li a{
text-decoration:underline;
color:#0000FF;
}
.tokuten dd ul li a:hover{
opacity:0.7;
}

@media(max-width:768px){
.tokuten dd ul li{
font-size:14px;
}
}



/*---------------------------------------------------------

　05-07：contents

---------------------------------------------------------*/
.contents{
background:#ffffff;
padding:60px 60px 160px 60px;
position:relative;
z-index:11;
margin:-1px 0px 0px 0px;
}
.contents::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
background:#efeae7;
clip-path:polygon(0 0, 100% 0, 0 100%);
pointer-events:none;
z-index:0;
}
.contents::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
background:#efeae7;
clip-path:polygon(0 100%, 100% 0, 100% 100%);
pointer-events:none;
z-index:0;
}
.contents h2{
display:flex;
justify-content:center;
margin:0 0 40px 0;
position:relative;
z-index:1;
padding:230px 0px 0px 0px;
}
.contents .contents_image01{
position:absolute;
top:-180px;
right:0;
left:0;
margin:0 auto;
max-width:40%;
z-index:15;
}
.contents .contents_image01 img{
width:100%;
height:auto;
display:block;
}
.contents p.comming_soon{
font-size:54px;
text-align:center;
margin:0px 0px 50px 0px;
}

/*---------------------------------------------------------

　05-08：goods

---------------------------------------------------------*/
.goods{
background:#efeae7;
padding:200px 60px 160px 60px;
position:relative;
z-index:12;
margin:-1px 0px 0px 0px;
container-type:inline-size;
container-name:goods-section;
}
.goods::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:80px;
background:#ffffff;
clip-path:polygon(0 0, 100% 0, 0 100%);
pointer-events:none;
z-index:0;
}
.goods::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
background:#ffffff;
clip-path:polygon(0 100%, 100% 0, 100% 100%);
pointer-events:none;
z-index:0;
}
.goods h2{
display:flex;
justify-content:center;
margin:0 0 40px 0;
position:relative;
z-index:1;
white-space:nowrap;
overflow:hidden;
}
/* h2内画像：最大100px・優先的に縮小 */
.goods h2 .char-wrap img{
width:min(100px, 14cqi);
height:min(100px, 14cqi);
object-fit:contain;
}
.goods .goods_image01{
position:absolute;
top:-10px;
left:40px;
width:min(201px, 35cqi);
z-index:15;
}
.goods .goods_image01 img{
width:100%;
height:auto;
display:block;
}
.goods .goods_image02{
position:absolute;
top:50px;
right:40px;
width:min(201px, 35cqi);
z-index:15;
}
.goods .goods_image02 img{
width:100%;
height:auto;
display:block;
}
.goods p.comming_soon{
font-size:54px;
text-align:center;
margin:0px 0px 50px 0px;
}

/*---------------------------------------------------------

　05-09：notice

---------------------------------------------------------*/
.notice{
background:#ffffff;
padding:60px 60px 160px 60px;
position:relative;
z-index:13;
margin:-1px 0px 0px 0px;
}
.notice::before{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
background:#efeae7;
clip-path:polygon(0 0, 100% 0, 0 100%);
pointer-events:none;
z-index:0;
}
.notice::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
background:#3e9da1;
clip-path:polygon(0 100%, 100% 0, 100% 100%);
pointer-events:none;
z-index:0;
}
.notice h2{
display:flex;
justify-content:center;
margin:0 0 60px 200px;
position:relative;
z-index:1;
}
.notice .notice_image01{
position:absolute;
top:-170px;
left:40px;
max-width:40%;
z-index:15;
}
.notice .notice_image01 img{
width:100%;
height:auto;
display:block;
}
.notice ul{
list-style-type:disc;
font-size:16px;
}
.notice ul li{
list-style-type:disc;
line-height:2.5;
margin:0px 0px 0px 22px;
}
.notice h3{
margin:40px 0px 0px 0px;
}
.notice dl{
line-height:2.2;
margin:20px 0px 0px 0px;
}
.notice ol{
list-style-type:decimal;
}
.notice ol li{
list-style-type:decimal;
margin:0px 0px 0px 20px;
}
.notice p{
line-height:2.2;
margin:20px 0px 0px 0px;
}
.mt15{
margin-top:15px !important;
}

/*---------------------------------------------------------

　05-10：Keyvisual

---------------------------------------------------------*/
.Keyvisual{
background:#3e9da1;
padding:200px 60px 160px 60px;
position:relative;
z-index:7;
margin:-1px 0px 0px 0px;
container-type:inline-size;
container-name:keyvisual-section;
}
/* 上部の斜め：profileの背景色(#efeae7)の三角 */
.Keyvisual::before{
content:'';
position:absolute;
top:-1px;
left:-1px;
width:100%;
height:84px;
background:#efeae7;
clip-path:polygon(0 0, 100% 0, 0 100%);
pointer-events:none;
z-index:0;
}
/* 下部の斜め：piaproの背景色(#efeae7)の三角 */
.Keyvisual::after{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
background:#efeae7;
clip-path:polygon(0 100%, 100% 0, 100% 100%);
pointer-events:none;
z-index:0;
}
.Keyvisual h2{
margin:0 0 60px 0;
position:relative;
z-index:1;
white-space:nowrap;
overflow:hidden;
}
.Keyvisual h2 .char-wrap img{
width:min(75px, 9cqi);
height:min(75px, 9cqi);
object-fit:contain;
}
.Keyvisual h2 .char-wrap:nth-of-type(5){
margin:0 0 0 min(75px, 9cqi);
}
.Keyvisual dl{
display:flex;
justify-content:space-between;
margin:0;
z-index:1;
}
.Keyvisual dt{
max-width:50%;
margin:0 0 20px 0;
order:2;
}
.Keyvisual dt img{
width:100%;
}
.Keyvisual dd{
width:calc(50% - 15px);
color:#fff;
font-size:16px;
line-height:2.2;
order:1;
padding:40px 15px 0px 0px;
}

/*---------------------------------------------------------

　05-11：フッター

---------------------------------------------------------*/
footer{
background:#000000;
display:flex;
align-content:center;
justify-content:center;
align-items:center;
padding:20px 0px;
}
footer p{
text-align:center;
color:#fff;
display:inline-block;
margin:0px 10px 0px 0px;
font-size:14px;
font-family:"Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}


/*=========================================================

　06：汎用アニメーション

=========================================================*/
/*---------------------------------------------------------

　06-01：.fade-slide-in（右から左）
　使い方：class="fade-slide-in"

---------------------------------------------------------*/
.fade-slide-in{
opacity:0;
transform:translateX(40px);
transition:opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-slide-in--left{
transform:translateX(-40px);
}
.fade-slide-in.is-visible{
opacity:1;
transform:translate(0, 0);
}

/*---------------------------------------------------------

　06-02：.fade-up（下からふわっと）
　使い方：class="fade-up"

---------------------------------------------------------*/
.fade-up{
opacity:0;
transform:translateY(60px);
transition:opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-up.is-visible{
opacity:1;
transform:translateY(0);
}

/*---------------------------------------------------------

　06-03：.fade-down（上からふわっと）
　使い方：class="fade-down"

---------------------------------------------------------*/
.fade-down{
opacity:0;
transform:translateY(-60px);
transition:opacity 0.9s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.fade-down.is-visible{
opacity:1;
transform:translateY(0);
}

/*---------------------------------------------------------

　06-04：.news_list（スクロール付きテキストエリア）

---------------------------------------------------------*/
.news_list{
height:160px;
max-height:160px;
overflow-y:scroll;
overflow-x:hidden;
box-sizing:border-box;
scrollbar-width:thin;
scrollbar-color:var(--c-mid) transparent;
}
.news_list::-webkit-scrollbar{
width:4px;
}
.news_list::-webkit-scrollbar-track{
background:transparent;
}
.news_list::-webkit-scrollbar-thumb{
background:var(--c-mid);
border-radius:2px;
}

/*---------------------------------------------------------

　06-05：#page-top（ページ先頭に戻るボタン）

---------------------------------------------------------*/
#page-top{
position:fixed;
bottom:85px;
right:30px;
width:auto;
height:auto;
background:none;
border:none;
cursor:pointer;
padding:0;
z-index:140;
opacity:0;
pointer-events:none;
transition:opacity 0.3s ease;
}
#page-top.is-visible{
opacity:1;
pointer-events:all;
}
#page-top img{
width:auto;
height:auto;
display:block;
}
/* PCでは常に表示 */
@media(min-width:769px){
#page-top{
  opacity:1;
  pointer-events:all;
}
}
/* SPのみ：白い円の中に設置・サイズ固定 */


/*=========================================================

　07：goodsページ設定

=========================================================*/
/*---------------------------------------------------------

　07-01：

---------------------------------------------------------*/
.goods_page {
background:#efeae7;
padding:200px 60px 0px 60px;
position:relative;
z-index:12;
margin:-1px 0px 0px 0px;
container-type:inline-size;
container-name:goods-section;
}
.goods_page h1{
display:flex;
justify-content:center;
}
.goods_page h1 img{
margin:0px;
padding:0px;
}
.goods_page .goods_image01{
position:absolute;
top:10px;
left:40px;
width:min(201px, 35cqi);
z-index:15;
}
.goods_page .goods_image01 img{
width:100%;
height:auto;
display:block;
}
.goods_page .goods_image02{
position:absolute;
top:50px;
right:40px;
width:min(201px, 35cqi);
z-index:15;
}
.goods_page .goods_image02 img{
width:100%;
height:auto;
display:block;
}
.item{
container-type:inline-size;
container-name:item;
padding:0px 0px 0px;
}
.goods_page .item{
container-type:inline-size;
container-name:item;
padding:40px 0px 0px;
}

.item h2{
max-width:541px;
margin:0px auto 50px auto;
}
.item h2 img{
width:100%;
margin:0px;
padding:0px;
}
.item > ul{
list-style-type:none;
display:flex;
flex-wrap: wrap;
justify-content:space-between;
margin:0px;
padding:0px;
}
.item > ul > li{
width:45%;
list-style-type:none;
margin:0px 0px 50px 0px;
padding:0px;
}
/* コンテナ幅760px以上：380px固定 */
@container item (min-width:760px){
.item > ul > li{
  width:380px;
}
}
.item > ul > li:last-of-type{
margin-bottom:0;
}
.item ul li dt{
background:url("../img/item_frame.webp") left top no-repeat;
background-size:100% 100%;
max-width:100%;
aspect-ratio:1 / 1;
padding:21px 20px 22px 20px;
}
/*下層ページ用*/
.item ul#goods_page li dt{
aspect-ratio:1 / 1;
position: relative;
}

.item ul li dt img{
max-width:100%;
}
.item ul li dd{
font-size:24px;
font-weight:800;
line-height:1.5;
padding:20px 0px 0px 0px;
}
.item ul li dd span{
font-size:16px;
font-weight:normal;
}
.goods_page h3{
font-size:24px;
text-align: center;
margin:0px 0px 15px 0px;
}
.goods_precautions{
padding:50px 0px 70px 0px;
}
.goods_precautions ul {
list-style-type: disc;
font-size: 16px;
}
.goods_precautions ul li {
list-style-type: disc;
line-height: 2.2;
margin: 0px 0px 0px 22px;
}
.goods_page .btn_area{
text-align:center;
margin:0px 0px 75px 0px;
}
.goods_page .btn_area a{
max-width:90px;
display:block;
margin:0px auto;
}
.goods_page .btn_area a img{
width:100%;
}
.goods_page .btn_area a img:hover{
opacity:0.8;
}

/*---------------------------------------------------------

　07-01：トップページのみ反映

---------------------------------------------------------*/
.goods h3{
max-width:541px;
margin:0 auto 10px auto;
}
.goods h3 img{
width:100%;
}
.goods_precautions h4{
font-size:24px;
text-align:center;
padding:50px 0px 30px 0px;
}
.goods .btn_area{
text-align:center;
margin:50px 0px 100px 0px;
}
.goods .btn_area a{
max-width:390px;
display:block;
margin:0px auto;
}
.goods .btn_area a img{
width:100%;
}
.goods .btn_area a img:hover{
opacity:0.8;
}

.goods .btn_area strong{
display:block;
font-size:20px;
margin:0px 0px 15px 0px;
}
.goods .pb02 p{
font-size:24px;
font-weight:600;
text-align: center;
margin:0px 0px 10px 0px;
}
.goods .pb02 p span{
display:block;
line-height:1.7;
font-size:0.8em;
}
.goods .pb02 > ul{
width:80%;
padding:15px 0px 70px 0px;
line-height:2.0;
font-size:16px;
margin:0px auto;
}
/*トップページの購入特典*/
.goods .pb02 > .item > ul{
justify-content:center;
margin:0px;
padding:0px;
}
.goods .pb02 > .item > ul li{
padding:0px;
}

@media(max-width:768px){
.goods .pb02 > ul{
width:100%;
}

.goods_page {
background: #efeae7;
padding: 250px 0px 0px 0px;
position: relative;
z-index: 12;
margin: -1px auto 0px auto;
}
.goods_page h1{
max-width:100%;
display: flex;
justify-content: center;
margin: 0 0 40px 0;
position: relative;
z-index: 1;
white-space: nowrap;
overflow: hidden;
}
.goods_page .item{
padding:0px 0px 0px;
}
.goods_page .item h2{
margin:0px 20px 10px 20px;
}
.goods_page .item h2 img{
width:100%;
margin:0px;
padding:0px;
}
.goods_page .goods_image01{
position:absolute;
top:50px;
left:10px;
width:min(201px, 35cqi);
z-index:15;
}
.goods_page .goods_image01 img{
width:100%;
height:auto;
display:block;
}
.goods_page .goods_image02{
position:absolute;
top:40px;
right:10px;
width:min(201px, 35cqi);
z-index:15;
}
.goods_page .goods_image02 img{
width:100%;
height:auto;
display:block;
}
.goods_page .item > ul{
padding:0px 20px;
}
.item > ul > li{
width:100%;
margin:0px 0px 50px 0px;
}
.goods_precautions {
padding: 60px 20px 30px 20px;
}
.goods_precautions h3{
font-size:18px;
padding:0px 0px 0px 0px;
}
.goods_precautions h4{
font-size:18px;
padding:0px 0px 15px 0px;
}
.goods .pb02 > ul{
padding:15px 0px 50px 0px;
font-size:15px;
line-height:2.0;
}
.goods .pb02 p{
font-size:18px;
font-weight:600;
line-height:1.7;
text-align: center;
margin:0px 0px 10px 0px;
}
.goods .pb02 p span{
display:block;
font-size:0.8em;
padding:5px 0px 0px 0px;
}

.goods_precautions ul li {
line-height: 2.2;
font-size:14px;
}
}
/* h2内画像：最大100px・優先的に縮小 */
.goods_page h1 img{
width:min(100px, 14cqi);
height:min(100px, 14cqi);
object-fit:contain;
}

.item ul li dd{
font-size:19px;
}
.item ul li dd span{
font-size:13px;
}
}








/*---------------------------------------------------------

　07-02：商品スライダー設定

---------------------------------------------------------*/
/* スライダー全体（dtの枠内に収まる） */
.item_slider{
position:relative;
width:100%;
}

/* 表示窓：正方形・はみ出しを隠す */
.item_slider__viewport{
position:relative;
width:100%;
aspect-ratio:1 / 1;
overflow:hidden;
touch-action:pan-y;
}

/* スライドを横並びにするトラック */
.item_slider__track{
display:flex;
width:100%;
height:100%;
list-style:none;
margin:0;
padding:0;
transition:transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
touch-action:pan-y;
user-select:none;
cursor:grab;
}
.item_slider__track:active{
cursor:grabbing;
}

/* 各スライド */
.item_slider__slide{
flex:0 0 100%;
width:100%;
height:100%;
margin:0;
padding:0;
list-style:none;
}
.item_slider__slide img{
width:100%;
height:100%;
object-fit:contain; /* 商品を切らずに全体表示。余白なくフィットさせたいときは cover に */
object-position:center;
display:block;
pointer-events:none; /* ドラッグ時の画像ゴースト防止 */
}

/* 左右の矢印 */
.item_slider__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:16px;
height:16px;
background:none;
border:none;
padding:0;
cursor:pointer;
z-index:5;
}
.item_slider__arrow::before{
content:'';
display:block;
width:10px;
height:10px;
margin:0 auto;
border-top:2px solid #888888;
border-right:2px solid #888888;
}
.item_slider__arrow--prev{
left:0px;
}
.item_slider__arrow--prev::before{
transform:rotate(-135deg);
}
.item_slider__arrow--next{
right:0px;
}
.item_slider__arrow--next::before{
transform:rotate(45deg);
}
.item_slider__arrow:hover::before{
border-color:var(--c-pink);
}

/* ドット（ページャー） */
.item_slider__dots{
list-style:none;
display:flex;
justify-content:center;
position: absolute;
bottom:15px;
right: 0;
left: 0;
gap:8px;
margin:10px 0 0 0;
padding:0;
}
.item_slider__dot{
width:8px;
height:8px;
border-radius:50%;
background:#c8c4be;
cursor:pointer;
transition:background 0.3s ease, transform 0.3s ease;
}
.item_slider__dot.is-active{
background:var(--c-pink);
transform:scale(1.2);
}



/*=========================================================

　10：スライダー設定

=========================================================*/

/* スライダー全体 */
.pb-slider {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 背景画像（枠）コンテナ */
.pb-slider__bg {
  position: relative;
  width: 80%;
  aspect-ratio: 16 / 9;
  margin:0 auto;
}

.pb-slider__bg-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* スライダーコンテナ（背景画像の内側に配置） */
.pb-slider__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 85%;
  z-index: 2;
}

/* ビューポート（表示領域） */
.pb-slider__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
}

/* トラック（スライド群） */
.pb-slider__track {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
  transition: transform 0.4s ease;
}

/* 個別スライド */
.pb-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pb-slider__slide img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* 矢印ボタン */
.pb-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease;
}


.pb-slider__arrow svg {
  stroke: #888888;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pb-slider__arrow--prev {
  left: -20px;
}

.pb-slider__arrow--next {
  right: -20px;
}

/* ドット（ページネーション） */
.pb-slider__dots {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  z-index: 3;
}

.pb-slider__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #c8c4be;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.pb-slider__dot.is-active {
  background-color: var(--c-pink);
}

.pb-slider__dot:hover {
  background-color: rgba(255, 255, 255, 0.8);
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
/* 背景画像（枠）コンテナ */
.pb-slider__bg {
  width: 100%;
}

  .pb-slider__arrow {
    width: 40px;
    height: 40px;
  }

  .pb-slider__arrow svg {
    width: 20px;
    height: 20px;
  }

  .pb-slider__dots {
    bottom: 12px;
    gap: 6px;
  }

  .pb-slider__dot {
    width: 8px;
    height: 8px;
  }
}


/* ドラッグを有効にする */
.pb-slider__viewport {
  pointer-events: auto !important;
  cursor: grab;  /* ★掴むカーソル★ */
}

.pb-slider__track {
  pointer-events: auto !important;
  cursor: grab;  /* ★掴むカーソル★ */
}

.pb-slider__container {
  pointer-events: auto !important;
  cursor: grab;  /* ★掴むカーソル★ */
}

/* 画像がドラッグを妨害しないように */
.pb-slider__slide img {
  pointer-events: none;
  cursor: grab;  /* ★掴むカーソル★ */
}

.pb-slider__arrow {
  pointer-events: auto !important;
}

.pb-slider__dot {
  pointer-events: auto !important;
}

/* ドラッグ中のカーソル */
.pb-slider__viewport.dragging {
  cursor: grabbing;  /* ★掴んでる状態★ */
}


@media (max-width: 480px) {
  .pb-slider {
    max-width: 100%;
  }

  .pb-slider__arrow {
    width: 36px;
    height: 36px;
  }

  .pb-slider__arrow svg {
    width: 18px;
    height: 18px;
  }

  .pb-slider__arrow--prev {
    left: -20px;
  }

  .pb-slider__arrow--next {
    right: -20px;
  }

  .pb-slider__dots {
    bottom: 13px;
  }
}






/*=========================================================

　10：スマホ設定

=========================================================*/
/*---------------------------------------------------------

　10-01：#logo-overlay（オープニングロゴ）

---------------------------------------------------------*/
@media(max-width:768px){
#logo-overlay img{
  width:100%;
  height:240px;
  object-fit:contain;
  padding:6px 12px;
}
}

/*---------------------------------------------------------

　10-02：大枠・レイアウト

---------------------------------------------------------*/
@media(max-width:768px){
  html{
    overflow:auto;
    height:auto;
  }
  body{
    overflow:auto;
    height:auto;
    position:static;
    inset:auto;
  }
  #container{
    flex-direction:column;
    height:auto;
    overflow:visible;
  }
  #left-panel{
    width:100%;
    height:calc(100vw * 1080 / 868);
    max-height:100svh;
    flex-shrink:0;
    margin:0;
    padding:0;
    display:block;
    background:#1a1a1a;
  }
  main{
    overflow:visible;
    height:auto;
  }
  #drawer{
    width:100%;
  }
}

/*---------------------------------------------------------

　10-03：ナビゲーション

---------------------------------------------------------*/
@media(max-width:768px){
  .nav-btn{
    width:44px;
    height:44px;
  }
  /* ハンバーガーメニュー：SP初期は非表示（JSで制御） */
  .site-nav{
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s ease;
  }
  .site-nav.is-visible{
    opacity:1;
    pointer-events:all;
  }
}

/*---------------------------------------------------------

　10-04：表示切り替え（.pc / .sp）

---------------------------------------------------------*/
@media(max-width:768px){
  .pc{
    display:none !important;
  }
  .sp{
    display:block !important;
  }
}

/*---------------------------------------------------------

　10-05：ページャー（ドット）

---------------------------------------------------------*/
@media(max-width:768px){
  .slider-dots{
    position:relative;
    display:flex;
    justify-content:center;
    left:auto;
    right:auto;
    bottom:20px;
  }
}

/*---------------------------------------------------------

　10-06：header

---------------------------------------------------------*/
@media(max-width:768px){
  header{
    clip-path:polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
    padding:30px 5% 90px;
  }
  header h1,
  header p{
    max-width:100%;
  }

header h1::before{
content:'';
position:absolute;
inset:0px 0px;
background:url('../img/main_logo_bg.png') center / cover no-repeat;
pointer-events:none;
z-index:-1;
width:100%;
}

header .news{
    background:url("../img/news_bg_sp.png");
    background-repeat:no-repeat;
    background-size:contain;
    width:auto;
    height:auto;
    margin:0px auto 0px auto;
    padding:0px 0px 50px 0px;
  }
  header .news dl{
    background:none;
    color:#fff;
    height:auto;
    display:block;
    margin:0px 0px 30px 0px;
  }
  header .news dt{
    width:inherit;
    height:inherit;
    font-size:22px;
    color:#fff;
    text-align:center;
    display:block;
    border-bottom:1px solid #5e6265;
    padding:10px 0px 10px 0px;
    border-right:none;
  }
  header .news dd{
    width:inherit;
  }
  header .news dd ul{
    line-height:2.0;
	font-size:12px;
    padding:0px 0px 0px 15px;
  }
  header .news .news_list{
    max-height:50px;
    overflow-y:scroll;
    overflow-x:hidden;
    box-sizing:border-box;
    scrollbar-width:thin;
    scrollbar-color:var(--c-mid) transparent;
  }
  header .news .news_list::-webkit-scrollbar{
    width:4px;
  }
  header .news .news_list::-webkit-scrollbar-track{
    background:transparent;
  }
  header .news .news_list::-webkit-scrollbar-thumb{
    background:var(--c-mid);
    border-radius:2px;
  }
  header .news strong{
    display:block;
    margin:100px 0px 0px 0px;
  }
}

/*---------------------------------------------------------

　10-07：introduction

---------------------------------------------------------*/
@media(max-width:768px){
  .introduction{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto;
    padding:64px 20px 60px;
    font-size:15px;
    column-gap:0;
    row-gap:32px;
    margin-top:-40px;
    position:relative;
    z-index:2;
  }
  .introduction figure{
    grid-column:1;
    grid-row:1;
    width:70%;
    margin:-48px auto 0;
  }
  .introduction p:first-of-type{
    grid-column:1;
    grid-row:2;
  }
  .introduction p:last-of-type{
    grid-column:1;
    grid-row:3;
    padding-right:0;
  }
  .introduction::before,
  .introduction::after{
    display:none;
  }
}

/*---------------------------------------------------------

　10-08：profile

---------------------------------------------------------*/
@media(max-width:768px){
  .profile{
    background:#3e9da1;
    padding:80px 20px 40px;
    position:relative;
  }
  .profile::before{
    content:'';
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:40px;
    background:#efeae7;
    clip-path:polygon(0 0, 100% 0, 0 100%);
    pointer-events:none;
    z-index:1;
  }
  .profile::after{
    display:none;
  }
  .profile .profile-frame__bg{
    display:none;
  }
  .profile .profile-frame__inner{
    position:static;
    overflow:visible;
    display:block;
    padding:0;
    top:auto;
    left:auto;
    right:auto;
    bottom:auto;
  }
  .profile h2{
    margin:0 0 30px 0;
  }
  .profile h2 .char-wrap img{
    width:49px !important;
    height:49px !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain;
  }
  .profile h2 .char-wrap:nth-of-type(5){
    margin:0 0 0 49px !important;
  }
  .profile p{
    background:url("../img/star02.png") center bottom no-repeat;
    color:#fff;
    line-height:2.5;
    padding:0px 0px 70px 0px;
    font-size:15px;
  }
}

/*---------------------------------------------------------

　10-09：汎用 .slide-in-h2

---------------------------------------------------------*/
@media(max-width:768px){
  /* h2内の各画像をSPで統一（正方形強制） */
  .slide-in-h2 .char-wrap img{
    width:min(50px, 42px) !important;
    height:min(50px, 42px) !important;
    object-fit:contain;
    aspect-ratio:1 !important;
    max-width:none !important;
    margin:0 !important;
  }
  /* h2をセンター寄せ（profile・Keyvisualは除外） */
  .slide-in-h2{
    text-align:center;
  }
  .profile h2.slide-in-h2,
  .Keyvisual h2.slide-in-h2{
    text-align:left;
  }
  /* profile 2行目インデント */
  .profile h2 .char-wrap:nth-of-type(5){
    margin:0 0 0 49px !important;
  }
}

/*---------------------------------------------------------

　10-10：piapro

---------------------------------------------------------*/
@media(max-width:768px){
  /* piapro h2 span横表示 */
  .piapro h2 span{
    display:inline-block !important;
    font-size:28px;
    line-height:1.5;
    font-weight:600;
    vertical-align:bottom;
  }
  .piapro{
    padding:70px 20px 120px;
    margin-top:-40px;
  }
  .piapro h2 img{
    width:60%;
  }
  .piapro h3{
    font-size:28px;
  }
  .piapro h3 span{
    font-size:22px;
  }
  .piapro p{
    font-size:15px;
  }
  .piapro::before{
    content:'';
    position:absolute;
    top:-1px;
    left:0;
    width:100%;
    height:40px;
    background:#3e9da1;
    clip-path:polygon(0 0, 100% 0, 0 100%);
    pointer-events:none;
    z-index:0;
  }
  .piapro::after{
    display:none;
  }
}

/*---------------------------------------------------------

　10-11：about

---------------------------------------------------------*/
@media(max-width:768px){
  .about{
    padding:150px 20px 130px;
    margin:-1px 0 0 0;
  }
  .about::before{
    height:40px;
  }
  .about::after{
    display:none;
  }
  .about h2{
    margin:0 0 30px 0;
    padding-right:0;
    white-space:normal;
  }
  .about figure{
    display:block;
    right:0;
    left:0;
    top:-110px;
    margin:0 auto;
  }
  .about ul.top{
    margin:0 0 30px 0;
    padding-right:0;
  }
  .about ul.bottom{
    margin:0;
  }
  .about ul li{
    font-size:14px;
    line-height:2.2;
  }
}

/*---------------------------------------------------------

　10-12：entry

---------------------------------------------------------*/
@media(max-width:768px){
  .entry{
    padding:140px 20px 80px;
    margin:-1px 0 0 0;
  }
  .entry::before{
    height:40px;
  }
  .entry::after{
    display:none;
  }
  .entry figure.image01{
    display:block;
    max-width:40%;
    top:-100px;
    left:15%;
  }
  .entry figure.image02{
    display:block;
    top:-90px;
    right:15%;
  }
  .entry h2{
    white-space:nowrap;
    font-size:0;
    letter-spacing:0;
    word-spacing:0;
  }
  .entry h2 .char-wrap{
    display:inline-block;
    vertical-align:bottom;
    font-size:0;
    margin:0;
    padding:0;
  }
  .entry h3{
    margin:0 0 10px 0;
  }
  .entry p{
    font-size:15px;
  }
  .entry p a{
  display:inline-block;
	margin-left:0px;
  }
  .tokuten h4{
    font-size:18px;
  }
  .tokuten > ul{
    font-size:15px;
  }
  .tokuten dt{
    font-size:15px;
  }
  .tokuten dd ul{
    font-size:15px;
  }
}

/*---------------------------------------------------------

　10-13：contents

---------------------------------------------------------*/
@media(max-width:768px){
  .contents{
    padding:80px 20px 80px;
    margin:-1px 0 0 0;
    container-type:inline-size;
    container-name:contents-sp;
  }
  .contents::before{
    height:40px;
  }
  .contents::after{
    display:none;
  }
  .contents h2{
    padding:0;
    display:block;
    white-space:nowrap;
    overflow:hidden;
    text-align:center;
  }
  /* 1行に収まるよう可変・正方形強制 */
  .contents h2 .char-wrap img{
    width:min(50px, 42px) !important;
    height:min(50px, 42px) !important;
    object-fit:contain;
    aspect-ratio:1 !important;
    max-width:none !important;
    margin:0 !important;
  }
  .contents .contents_image01{
    display:block;
    top:-100px;
  }
  .contents p.comming_soon{
    max-width:60%;
    display:block;
    margin:0px auto;
  }
  .contents p.comming_soon img{
    width:100%;
  }
}

/*---------------------------------------------------------

　10-14：goods

---------------------------------------------------------*/
@media(max-width:768px){
  .goods{
    padding:120px 20px 80px;
    margin:-1px 0 0 0;
  }
  .goods::before{
    height:40px;
  }
  .goods::after{
    display:none;
  }
  .goods .goods_image01{
    display:block;
    left:10%;
    top:-50px;
  }
  .goods .goods_image02{
    display:block;
    right:10%;
    top:-60px;
  }
  .goods p.comming_soon{
    max-width:60%;
    display:block;
    margin:0px auto;
  }
}

/*---------------------------------------------------------

　10-15：notice

---------------------------------------------------------*/
@media(max-width:768px){
  .notice{
    padding:120px 20px 80px;
    margin:-1px 0 0 0;
  }
  .notice::before{
    height:40px;
  }
  .notice::after{
    display:none;
  }
  .notice h2{
    margin:0 0 30px 0;
    font-size:0;
    letter-spacing:0;
    word-spacing:0;
  }
  .notice h2 .char-wrap{
    display:inline-block;
    vertical-align:bottom;
    font-size:0;
    margin:0;
    padding:0;
  }
  .notice .notice_image01{
    display:block;
    max-width:20%;
    top:-60px;
    right:0;
    left:0;
    margin:0 auto;
  }
  .notice ul li{
    font-size:14px;
    line-height:2.2;
  }
.notice h3{
margin:30px 0px 0px 0px;
}
.notice dl{
font-size:14px;
line-height:2.2;
margin:15px 0px 0px 0px;
}
.notice ol{
list-style-type:decimal;
}
.notice ol li{
list-style-type:decimal;
margin:0px 0px 0px 20px;
}
.notice p{
font-size:14px;
line-height:2.2;
margin:15px 0px 0px 0px;
}

}

/*---------------------------------------------------------

　10-16：Keyvisual

---------------------------------------------------------*/
@media(max-width:768px){
  .Keyvisual{
    padding:0px 20px 80px;
    margin:-1px 0 0 0;
  }
  .Keyvisual::before,
  .Keyvisual::after{
    display:none;
  }
  .Keyvisual h2{
    white-space:normal;
  }
  /* Keyvisual h2画像サイズをprofileと統一 */
  .Keyvisual h2 .char-wrap img{
    width:49px !important;
    height:49px !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain;
  }
  /* Keyvisual 2行目インデント */
  .Keyvisual h2 .char-wrap:nth-of-type(5){
    margin:0 0 0 49px !important;
  }
  .Keyvisual dl{
    flex-direction:column;
  }
  .Keyvisual dt{
    max-width:100%;
    order:1;
    margin:0 0 24px 0;
  }
  .Keyvisual dd{
    width:100%;
    order:2;
    padding:0;
    font-size:15px;
  }
}

/*---------------------------------------------------------

　10-17：footer

---------------------------------------------------------*/
@media(max-width:768px){
  footer{
    flex-direction:column;
    gap:12px;
    padding:24px 20px;
    text-align:center;
  }
  footer p{
    margin:0;
    font-size:12px;
  }
}

/*---------------------------------------------------------

　10-18：#page-top

---------------------------------------------------------*/
@media(max-width:768px){
  #page-top{
    width:44px;
    height:44px;
    background:#ffffff;
    border-radius:50%;
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
    padding:10px;
  }
  #page-top img{
    width:100%;
    height:auto;
  }
}

/*---------------------------------------------------------

　10-19：profile h2 マージン調整（〜915px）

---------------------------------------------------------*/
@media(max-width:915px){
  .profile h2{
    margin:0 0 2cqi 0;
  }
}