@charset "utf-8";


/* responsive Start */
/*===================================================================== */


@media only screen and (max-width:768px){

.spnone{display: none!important;}
.pcnone{display: inherit!important;}



/*=====================================================================
# Navigation
======================================================================= */

#head {
    display: none;
}


/*=====================================================================
00. ハンバーガーメニュー
======================================================================= */

.menublock{
    display: inherit;
	position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 99999;
    /*mix-blend-mode: difference;*/
    }

.menu_n{display: none;}
    
.menuarea{ width:68px; height: 100%; position: absolute; top:19px; right:20px; z-index: 99999; text-align: center; display: block; transition: all 0.3s ease;}
.menuarea a{width:68px; height: 10px; padding: 10px 0; display: block;}
/*.menuarea a:hover .menu-line span{opacity: 0.6;}*/
    

/* ハンバーガーメニュー*/
.menu-line,
.menu-line span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-line {
  position: relative;
	z-index: 2;
  top:0;
  width: 68px;
  height:10px;
}
.menu-line span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #2d7a61;
transition: all 0.3s ease;

}
.menu-line span:nth-of-type(1) {
  top: 0;
}

.menu-line span:nth-of-type(2) {
  top: 9px;
}

/* アニメーション*/
.menu-trigger.active span:nth-of-type(1) {
  transform:translateY(4.5px) rotate(10deg);
}

.menu-trigger.active span:nth-of-type(2) {
    transform:translateY(-4.5px) rotate(-10deg);
}



/*=====================================================================
00. ドロワーメニュー
======================================================================= */
/* 全画面ナビ(背景色・下の余白・角丸はPCと同じ。角丸の大きさだけフッターに合わせる) */
#navigation {
  position: fixed;
  min-width: 100%;
  inset: 6px 0 40px 0; /* 画面の上端に触れさせない(Safariが上部の色を拾って、閉じるときにパキっと切り替わるのを防ぐ) */
  box-shadow: 0 -6px 0 #e3f2dc; /* 上の6pxの隙間を同じ色で埋める */
  background:#fff; /* 閉じている間は白(ヘッダーと同じ)。閉じるとき最後にふわっと白へ */
  clip-path: inset(0 0 100% 0); /* 上に隠す */
  visibility: hidden; /* 閉じている間は描画しない(iPhoneのSafariが上部の色を拾うのを防ぐ) */
  transition: clip-path .6s ease, background-color .25s ease .35s, visibility 0s linear .6s; /* 閉じる動きの終わりに色が白へ変わり、そのあと hidden */
  z-index:999;
  display:flex;
    align-items:center;
    justify-content:center;
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
}
.navigation_inner{
    width: 100%;
    min-width: 100%;
    height: 100%;
    background-image:url("../images/navi_logo.png");
    background-repeat: repeat-x;
    background-size: 120vw auto;
    background-position: 0 center;
}

#navigation.active {
  clip-path: inset(-6px 0 0 0 round 0 0 48px 48px); /* 影の分(上6px)まで表示 */
  visibility: visible;
  background:#e3f2dc;
  transition: clip-path .6s ease, background-color 0s, visibility 0s;
}

/* ドロワーの下の縁のドロップシャドウ(影専用の要素。master.css の .nav_shadow の角丸だけSP用に) */
.nav_shadow{border-bottom-left-radius: 48px; border-bottom-right-radius: 48px;}


/* メニュー項目:ロゴ(上)とSNS(下)の間の真ん中に置く */
#navigation ul {
  list-style:none;
  margin:0;
  padding:80px 0 190px 40px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:left;
  justify-content:center;
  height:100%;
}
#navigation ul li {
  overflow:hidden; /* マスクの役目 */
  margin:.7rem 0;
}
#navigation ul li span {
  display:inline-block;
  transform:translateY(100%); /* 下に隠す */
  opacity:0;
  transition:transform .8s cubic-bezier(0.77, 0, 0.175, 1),
             opacity .6s ease;
}

#navigation ul li:first-child {
  display: block;
}

/* 開くとき順番に出す */
#navigation.active ul li:nth-child(1) span{transition-delay:.03s;}
#navigation.active ul li:nth-child(2) span{transition-delay:.06s;}
#navigation.active ul li:nth-child(3) span{transition-delay:.09s;}
#navigation.active ul li:nth-child(4) span{transition-delay:.12s;}
#navigation.active ul li span {
  transform:translateY(0);
  opacity:1;
}

/* 閉じるとき逆順で下に戻す */
#navigation.closing ul li span {
  transform:translateY(100%);
  opacity:1;
}
#navigation.closing ul li:nth-child(4) span{transition-delay:.03s;}
#navigation.closing ul li:nth-child(3) span{transition-delay:.06s;}
#navigation.closing ul li:nth-child(2) span{transition-delay:.09s;}
#navigation.closing ul li:nth-child(1) span{transition-delay:.12s;}


#navigation ul li a{
    text-decoration: none; 
    font-size: 24px;
	color: #2d7a61;
    position: relative; 
    letter-spacing: .01em; 
	
  display: inline-block;
  white-space: nowrap;
}

#navigation ul li a::after{
  position: absolute;
  bottom: 0px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #2d7a61;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .2s;
}
#navigation ul li a:hover::after{
  transform-origin: left top;
  transform: scale(1, 1);
}


#navigation .nv_logo{width: 122px; position: absolute; top: 16px; left: 22px;}
#navigation .nv_logo img{width:100%;}

#navigation .snslink{font-size: 12px; color: #2d7a61; position: absolute; bottom: 130px; left: 40px;}
#navigation .snslink .en02{margin-bottom:20px; line-height: 1;}
#navigation .snslink a{font-size: 20px; color: #2d7a61; margin-right: 34px;}
#navigation .snslink a:last-child{margin-right:0;}

#navigation .contact{font-size: 14px; letter-spacing: .02em; margin-bottom: 0; position: absolute; bottom: 84px; left: 40px;}
#navigation .contact a{text-decoration: none; color: #2d7a61;}
#navigation .copyright{color: #2d7a61; font-size: 12px; letter-spacing: .02em; position: absolute; bottom: 44px; left: 40px;}

/*=====================================================================
wrap
======================================================================= */

.wrap{position: relative; min-width: 100%; }



/*=====================================================================
header
======================================================================= */



header {
    width: 100%;
    height: 80px;
    min-width: 100%;
    padding: 22px 22px 0;
    box-sizing: border-box;
    line-height:1;
    z-index: 3;
    position: relative;
    background-color:#FFF;
}

	
.head_logo{width: 122px;}
.head_logo img{width:100%;}



/*=====================================================================
トップページ
======================================================================= */

/* メインビジュアル */
.kv__slide{flex-basis: 88%; width: 88%;}
	
/* メインビジュアル(コラム):SPは文字を大きく */
.kv-col__bar{width: 11%;}
.kv-col__title{font-size: 3.8cqw;}   /* タイトル 約13px */
.kv-col__title .is-pc{display: none;}
.kv-col__title .is-sp{display: inline;}
.kv-col__name{font-size: 4.4cqw;}    /* ライター名 約15px */
.kv-col__pos{font-size: 2.9cqw;}     /* 肩書き 約10px */
.kv-col__date{top: 5.4%; right: 5.6%; height: auto; padding-left: 0; border-left: 0; font-size: 2.5cqw;}   /* 日付:右上 */
.kv-col__side{font-size: 2.5cqw;}    /* Relax Night Column 約9px */
.kv-col__who{top: 84%;}
.kv-col__pos{margin-top: 1cqw;}

/* メインビジュアル(バナー):SPは文字を大きく */
.kv-bn__bar{height: 12%; gap: 3cqw; padding: 0 3cqw 0 4.5cqw;}
.kv-bn__icon{width: 6cqw;}          /* タグのアイコン */
.kv-bn__title{font-size: 3.8cqw;}   /* タイトル 約13px(コラムと同じ) */
	
/* NEW!:大きく(右端の位置は今のまま) */
.kv-col__new{left: 62.7%; width: 28.2%; height: 8.5%; font-size: 5.2cqw; box-shadow: inset 0 0 0 1px #395149;}
.kv__slide .kv-col__new .kv-ico{width: 4.2cqw;}

/* 矢印の丸:大きく */
.kv-arrow{left: 80.7%; width: 14.1%;}
.kv__slide--column .kv-arrow{top: 79.5%;}   /* コラム:ライター名と同じ高さあたり */
.kv__slide--banner .kv-arrow{top: 71%;}     /* バナー:紫の帯の上に収まる位置 */
/* 矢印の丸・矢印の線は、SPでは1pxに固定(丸の大きさに合わせて太くならないように) */
.kv-arrow::after{box-shadow: inset 0 0 0 1px #395149;}
.kv-arrow svg path{vector-effect: non-scaling-stroke; stroke-width: 1px; stroke: #395149;}
	
/* メッセージ */
.top-message{margin: 60px 20px 0;}
.top-message__inner{padding: 98px 30px 28px; border-radius: 40px;}
.top-message__heading{top: -30px; right: 18px;}
.top-message__heading .blc02{margin-top: -5px;}
.top-message__heading .split-text{font-size: 62px;}
.top-message .top-message__lead{font-size: 23px; line-height: 1.9; letter-spacing: .04em;}
.top-message__body{margin: 30px 0 0; font-size: 15px; line-height: 2.1; letter-spacing: .03em;}
.top-message__body p{margin-bottom: 22px;}
.top-message__side{right: 16px; font-size: 10px;}
.top-message__link{margin: 18px -8px 0 0;}
a.round-link,
a.round-link:link,
a.round-link:visited{gap: 18px;}
.round-link__text{font-size: 13px;}
.round-link__arrow{width: 48px;}
.round-link__arrow img{width: 28px;}

/* Product */
.top-product .section-head,
.top-column .section-head{padding: 40px 20px 0;}
.top-product .section-head__line,
.top-column .section-head__line{grid-column: 1 / -1; grid-row: 2; margin-top: 26px;}

.tp-main{grid-template-columns: 1fr; width: calc(100% - 40px); margin-top: 32px; border-radius: 20px;}
.tp-main__img{aspect-ratio: 1 / .86; border-right: 0; border-bottom: 1px solid var(--tp-ink);}
.tp-main__body{padding: 26px 22px 24px;}
.tp-main__title{font-size: 20px;}
.tp-main__line{margin-left: 20px;}
.tp-main__catch{margin-top: 24px; font-size: 16px; line-height: 1.7; letter-spacing: .06em;}
.tp-main__desc{margin: 16px 0 0; font-size: 14px; line-height: 2.0;}
a.product-btn.tp-main__btn,
a.product-btn.tp-main__btn:link,
a.product-btn.tp-main__btn:visited{height: 52px; font-size: 16px;}

.marquee--product{margin-top: 34px; padding-bottom: 0;}
.marquee--product ul.marquee__list{gap: 26px; padding-right: 26px;}
.tp-card{flex-basis: 226px; width: 226px; border-radius: 20px;}
.tp-card__img img{top: 22px; left: 22px; width: calc(100% - 44px); height: calc(100% - 44px);}
.tp-card__body{padding: 22px 18px 18px;}
.tp-card__title{min-height: 45px; font-size: 15px;}
.tp-card__buy{min-height: 56px; margin: 12px 0 18px;}
.tp-card__sub{font-size: 12px;}
.tp-card__price{margin-top: 4px; font-size: 18px;}
.tp-card__price span{font-size: 10px;}
a.product-btn.tp-card__btn,
a.product-btn.tp-card__btn:link,
a.product-btn.tp-card__btn:visited{margin-top: auto; height: 46px; font-size: 14px;}

/* Column */
.top-column{padding-bottom: 36px;}
.tc-grid{display: block; margin: 0 20px; padding-top: 32px;}
.tc-divider{display: none;}
.tc-head{gap: 14px; margin-bottom: 24px;}
.tc-head__en{font-size: 22px;}
.tc-head__ja{font-size: 12px;}
.tc-head__note{font-size: 12px;}
.tc-col--rank{padding-bottom: 36px; border-bottom: 1px solid #2d7a61;}
.tc-col--rec{padding-top: 34px;}

ol.rank-list{gap: 18px;}
.rank-card{padding: 18px 16px 16px; border-radius: 22px;}
.rank-card__no{top: 8px; left: 8px; width: 26px; height: 26px; font-size: 12px;}
.rank-card__top{gap: 16px;}
.rank-card__thumb{width: 78px; height: 78px;}
.rank-card__title{font-size: 15px; line-height: 1.6;}
a.rank-card__link::after{border-radius: 22px;}
.rank-card__writer{font-size: 11px;}
.rank-card__writer b{margin-top: 3px; font-size: 15px;}
.rank-card__bottom{align-items: flex-end; gap: 10px; margin-top: 14px;}
.rank-card__date{font-size: 11px; text-align: right;}
ul.tag-pills{gap: 10px;}
ul.tag-pills--sm{gap: 8px;}
.tag-pills--sm a.tag-pill,
.tag-pills--sm a.tag-pill:link,
.tag-pills--sm a.tag-pill:visited{height: 24px; padding: 0 10px; font-size: 11px;}
a.tag-pill,
a.tag-pill:link,
a.tag-pill:visited{height: 30px; padding: 0 13px; font-size: 12px;}

.rec__title{margin-top: 20px; font-size: 15px; line-height: 1.5;}
.rec__meta{flex-direction: column; align-items: stretch; gap: 8px; margin-top: 20px; padding: 0; border-radius: 0; background: none;}
a.rec__writer,
a.rec__writer:link,
a.rec__writer:visited{gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #f2f2f2;}
.rec__writer-img{width: 28px; height: 28px;}
.rec__writer-name{font-size: 12px;}
.rec__date{padding: 0; margin-top: 8px; text-align: right; font-size: 11px;}
.tc-tags{margin-top: 34px; padding-top: 34px; border-top-color: #2d7a61;}

/* Recent Post */
.top-recent__head{margin: 0 20px; padding: 32px 0 34px; gap: 14px;}
.top-recent + .section-writer .section-head{padding-top:30px;}

a.recent-item__link,
a.recent-item__link:link,
a.recent-item__link:visited{display: grid; grid-template-columns: auto 1fr; grid-template-areas: "img writer" "title title" "date date"; align-items: center; column-gap: 20px; min-height: 0; padding: 22px 20px 16px;}
.recent-item__label{display: none;}
.recent-item__img{grid-area: img; width: 80px; height: 80px;}
.recent-item__body{display: contents;}
.recent-item__writer{grid-area: writer; width: auto; margin-left: 0; padding: 2px 0 2px 16px;}
.recent-item__writer-name{font-size: 15px;}
.recent-item__writer-en{margin-top: 4px; font-size: 11px;}
.recent-item__writer-position{margin-top: 8px; font-size: 11px; line-height: 1.7;}
.recent-item__title{grid-area: title; margin-top: 18px; padding-top: 16px; border-top: 1px solid #2d7a61; font-size: 17px; line-height: 1.6;}
.recent-item__date{grid-area: date; margin: 10px 0 0; font-size: 11px; text-align: right;}

/* 右下のオンラインショップボタン */
.online-btn-wrap{right: 12px; bottom: 14px; width: 200px;}

	
/*=====================================================================
コラム・ライター(コラム詳細のSP)
======================================================================= */
	
	
/* ライター一覧(SP):1列、中身の並びはPCと同じ、hover演出なし */
.writer-cards{grid-template-columns: 1fr;}
.writer-card,
.writer-card:nth-child(odd){border-right: none;}
.writer-card:hover{scale: none; translate: none;}

a.writer-card__link,
a.writer-card__link:link,
a.writer-card__link:visited{min-height: 0; padding: 36px 20px 36px 16px;}

.writer-card__label{margin: 0 18px 0 0; font-size: 10px;}
.writer-card__img{width: 96px; height: 96px;}
.writer-card__body{min-width: 0; margin: 0 0 0 16px; padding: 0 0 0 16px;}
.writer-card__name{font-size: 18px;}
.writer-card__name-en{margin-top: 6px; font-size: 10px;}
.writer-card__position{margin-top: 12px; font-size: 11px; line-height: 1.7;}
.writer-card__count{right: 16px; bottom: 10px; font-size: 10px;}
.writer-card__count-num{font-size: 14px;}

/* マウス追従の動きを無効化(幅の狭いPCブラウザ対策) */
.writer-card__img,
.writer-card__body,
.writer-card__count{translate: none;}
	

/* ページタイトル(リンクは下の段に) */
.page_ttl_area{padding: 18px 20px 16px;}
.page_ttl_area h1,
.page_ttl_area p.en03{font-size: 40px;}
.page_ttl_area span{font-size: 12px; margin-left: 14px;}
.page_ttl_area .link-btns{position: static; justify-content: flex-end; gap: 20px; margin: 16px -20px -16px; padding: 14px 20px; border-top: 1px solid #2d7a61;}
a.link-btn .link-btn__text{font-size: 12px;}
a.link-btn .link-btn__icon{width: 24px;}

/* キービジュアルとシリーズ */
.writer-detail__frame,
.column-detail__frame{margin: 0 20px;}
.writer-detail__frame{--frame-gap: 20px; margin-top: 30px;}
.writer-series{padding: 26px 20px 28px;}
.writer-series__body{padding-left: 30px;}
.writer-series__label{top: 28px; left: 20px; font-size: 10px;}
.writer-series__title{margin: 0 0 16px; font-size: 17px;}
.writer-series__text{font-size: 13px; line-height: 1.9;}

/* 記事 */
.column-article{padding: 28px 20px 50px;}
.column-article__head{display: block; padding-bottom: 0; border-bottom: none;}
.column-article__title{padding-bottom: 14px; border-bottom: 1px solid #2d7a61; font-size: 18px;}
.column-article__date{display: block; height: auto; margin-top: 14px; padding-left: 0; border-left: none; text-align: right; font-size: 10px;}
	
/* 記事本文の見出し(ブロックエディタ) */
.column-article__body h2{font-size: 18px; line-height: 1.6;}
.column-article__body h3{font-size: 16px; line-height: 1.6; margin-bottom: 15px}
.column-article__body h4{font-size: 15px; line-height: 1.6;}

/* 記事:タイトルの下に「タグ(左) / 日付(右)」を1行で */
.column-article{display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;}
.column-article__head{display: contents;}
.column-article__title{grid-column: 1 / -1;}
.column-article__date{grid-column: 2; grid-row: 2; margin-top: 20px;}
ul.column-list__tags.column-article__tags{grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 20px;}
.column-article__body{grid-column: 1 / -1;}
	
.column-article__body{margin-top: 26px; font-size: 15px; line-height: 2.1;}
.column-article__body img{margin: 30px 0;}
.column-article__body iframe{margin: 30px 0;}
	
/* ブロックエディタ　カラムブロック */
.column-article__body .wp-block-columns{flex-wrap: wrap; gap: 0;}
.column-article__body .wp-block-column{flex-basis: 100% !important;}
	
/* 文字サイズ */
.column-article__body .has-small-font-size{font-size: 13px;}
.column-article__body .has-medium-font-size{font-size: 16px;}
.column-article__body .has-large-font-size{font-size: 20px;}
.column-article__body .has-x-large-font-size{font-size: 24px;}

/* ライターのプロフィール */
.writer-profile{display: block;}
.writer-profile__visual{display: flex; min-height: 0; padding: 20px 0; justify-content: center; border-bottom: 1px solid #2d7a61;}
.writer-profile__name-en{display: none;}
.writer-profile__photo{width: 96px; height: 96px;}
a.writer-profile__photo:hover{scale: none; translate: none; box-shadow: none;}
.writer-profile__label{left: auto; right: 16px; height: 80px; padding-left: 9px; font-size: 9px;}
.writer-profile__body{border-left: none;}
.writer-profile__head{padding: 18px 20px 16px;}
.writer-profile__name{font-size: 17px;}
.writer-profile__position{margin-top: 6px; font-size: 11px;}
.writer-profile__info{padding: 24px 20px 30px;}
.writer-profile__text{font-size: 13px; line-height: 1.9;}
ul.writer-profile__sns{gap: 12px 24px; margin-top: 26px;}
.writer-provider.is-first{margin-top: 18px; padding-top: 20px;}
.writer-provider{margin-top: 20px; gap: 14px;}
.writer-provider__img{width: 60px;}
ul.writer-provider__links{gap: 12px 24px;}

/* 前の記事 / この作家の記事 / 次の記事 */
.column-nav{gap: 22px; padding: 20px 12px;}
.column-nav a{font-size: 13px;}
.column-nav__prev::before{margin-right: 10px;}
.column-nav__next::after{margin-left: 10px;}

/* 関連コラム(2列) */
.related-column{padding: 40px 20px 40px;}
.related-column__title{margin-bottom: 24px;}
.related-column__en{font-size: 20px;}
.related-column .column-list{grid-template-columns: repeat(2, 1fr); gap: 32px 28px;}
.related-column .column-list__title{font-size: 15px; line-height: 1.5;}
	
/* ライター詳細のコラム一覧(2列) */
.writer-columns{padding: 30px 20px 40px;}
.writer-columns .column-list{grid-template-columns: repeat(2, 1fr); gap: 32px 28px;}
.writer-columns .column-list__head{margin-top: 12px;}
.writer-columns .column-list__title{font-size: 15px; line-height: 1.5;}
.writer-columns .column-list__excerpt{margin-top: 8px; font-size: 13px; line-height: 1.8;}
p.column-list__date{margin-top: 8px; font-size: 11px;}

/* ===== ページ送り(共通) ===== */
.pagination{gap: 14px; margin-top: 36px;}
.pagination .page-numbers{width: 34px; height: 34px; font-size: 12px;}

	
/* ===== コラム一覧 ===== */
.column-archive__head{padding: 16px 20px 28px; border-radius: 40px 40px 0 0;}
.column-archive__head .link-btns{position: relative; top: 10px; right: 10px; justify-content: flex-end; margin: 0 0 8px;}
.column-archive__en{font-size: 72px;}
.column-archive__ja{margin-top: 4px; font-size: 13px;}
.column-archive__lead{margin-top: 22px; font-size: 14px; line-height: 2; text-align: left;}
.column-archive__lead br{display: none;}

.column-archive__body{padding: 24px 20px 40px;}
.column-list--archive{grid-template-columns: repeat(2, 1fr); gap: 0 28px;}
.column-list--archive .column-list__item{padding-bottom: 36px;}
.column-list--archive .column-list__title{margin-top: 12px; font-size: 15px; line-height: 1.5;}
.column-archive__body .pagination{margin-top: 0;}

/* ライター名(角丸)と日付(角丸の外・下) */
.column-list__meta{flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; padding: 0; border-radius: 0; background: none;}
a.column-list__writer,
a.column-list__writer:link,
a.column-list__writer:visited{gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #f2f2f2;}
.column-list__writer-img{width: 28px; height: 28px;}
.column-list__writer-name{font-size: 12px;}
.column-list__meta .column-list__date{padding: 0; text-align: right; font-size: 11px; margin-top:6px;}

ul.column-list__tags{gap: 6px; margin-top: 12px;}
ul.column-list__tags li a,
ul.column-list__tags li a:link,
ul.column-list__tags li a:visited{padding: 4px 10px 5px; font-size: 10px;}

/* タグ一覧 */
.column-tags{padding: 28px 20px 36px;}
.column-tags__title{margin-bottom: 16px; font-size: 14px;}
.column-tags__title span{font-size: 11px;}
ul.column-tags__list{gap: 8px;}
a.column-tags__item,
a.column-tags__item:link,
a.column-tags__item:visited{padding: 5px 12px 6px; font-size: 11px;}
	
	
/* 共通セクション(Column / Writer のマーキー) */
.section-head{grid-template-columns: 1fr auto; padding: 26px 28px;}
.section-head__title{font-size: 22px;}
.section-column .section-head__line{display: none;}
.section-column:not(:has(+ .section-writer)){margin-bottom: 40px;}
.section-writer .section-head{padding: 32px 28px 0;}
.section-writer .section-head__line{grid-column: 1 / -1; grid-row: 2; margin-top: 22px;}
.section-head .link-btns{justify-self: end;}

.marquee--column{gap: 21px; padding: 27px 0;}
.marquee--writer{gap: 14px; padding: 31px 0 40px;}
ul.marquee__list{gap: 14px; padding-right: 14px;}

a.pill-column,
a.pill-column:link,
a.pill-column:visited{gap: 14px; height: 42px; padding-right: 20px; font-size: 12px; letter-spacing: .04em;}
.pill-column__img{width: 40px; height: 40px;}

a.pill-writer,
a.pill-writer:link,
a.pill-writer:visited{gap: 12px; height: 80px; padding: 0 18px 0 12px;}
.pill-writer__img{width: 58px; height: 58px;}
.pill-writer__body{min-width: 150px;}
.pill-writer__label{margin-bottom: 5px; font-size: 9px;}
.pill-writer__name{font-size: 14px;}
.pill-writer__position{margin-top: 3px; font-size: 10px; line-height: 1.6;}
.pill-writer__line{width: 28px;}
	

/*=====================================================================
製品情報
======================================================================= */
	
.product-main{--img-pad: 28px; margin-bottom: 40px; border-radius: 40px;}
.product__head{padding: 44px 20px 30px;}
.product__en{font-size: 72px;}
.product__ja{margin-top: 6px; font-size: 14px;}
.product__body{padding: 0 20px 56px;}

ul.product-list{grid-template-columns: minmax(0, 1fr);}
.product-card{margin-bottom: 28px;}
.product-card:last-child{margin-bottom: 0;}
ul.product-list.product-list--archive{row-gap: 30px;}
.product-card{border-radius: 22px;}
.product-card > :not(.product-card__img):not(.product-card__inner){margin-left: 20px; margin-right: 20px;}
.product-card::after{height: 22px;}

.product-card__title{margin-top: 24px; font-size: 16px;}
.product-card__catch{margin-top: 18px; padding-left: 14px; font-size: 13px;}
.product-card__desc{margin-top: 18px; font-size: 13px; line-height: 2;}
.product-card__buy{margin-top: 20px;}
.product-card__price{font-size: 20px;}
a.product-btn,
a.product-btn:link,
a.product-btn:visited{height: 48px; margin-top: 24px; font-size: 15px;}
.product-btn__icon{right: 9px; width: 30px; height: 30px; margin-top: -15px;}

ul.product-links{gap: 12px; margin-top: 20px;}
a.product-link,
a.product-link:link,
a.product-link:visited{height: 42px; padding: 0 10px;}
.product-link__arrow{width: 24px; height: 24px;}
.product-link__label{padding-right: 16px; font-size: 13px;}
.product-link--rakuten .product-link__logo{width: 56px;}
.product-link--yahoo .product-link__logo{width: 86px;}
.product-link--qoo10 .product-link__logo{width: 50px;}

.product-archive{margin-top: 56px;}
.product-archive__head{margin-bottom: 28px;}
.product-archive__en{font-size: 22px;}
.product-archive__line{margin: 0 14px;}
.product-archive__ja{font-size: 11px;}

.product-card__inner{padding: 24px 20px 20px;}
.product-card__inner .product-card__desc{margin-bottom: 24px;}
	

/* ==============================
   オンラインショップ
============================== */
/* 緑の背景 */
.shop-main {
  margin: 0 0 40px;
  padding: 50px 0 60px;
  border-radius: 60px;
}
.shop-inner {
  width: auto;
  padding: 0 20px;
}

/* 見出し */
.shop-ttl .en03 {
  font-size: 72px;
}
.shop-ttl .ja {
  margin-top: 12px;
  font-size: 13px;
}

/* 概要文(SPは改行をなくして左揃え) */
.shop-lead {
  margin: 28px 0 36px;
  text-align: left;
  font-size: 14px;
  line-height: 2;
}
.shop-lead br {
  display: none;
}

/* カード(1列。高さ揃えは不要なので縦並び) */
.shop-list {
  grid-template-columns: 1fr;
  gap: 24px;
}
.shop-card {
  display: flex;
  flex-direction: column;
  grid-row: auto;
  border-radius: 16px;
}
.shop-logo {
  height: 140px;
}
.shop-logo img {
  max-height: 50px;
}
.shop-name {
  padding: 22px 20px 0;
  font-size: 17px;
}
.shop-text {
  padding: 12px 20px 0;
  font-size: 14px;
  line-height: 1.9;
}
.shop-btn-wrap {
  align-self: stretch; /* PCの align-self: end を打ち消す(横幅いっぱいに) */
  margin-top: auto;
  padding: 22px 20px 28px;
}

/* ボタン */
.shop-card a.product-btn,
.shop-card a.product-btn:link,
.shop-card a.product-btn:visited {
  height: 50px;
  font-size: 15px;
  letter-spacing: .04em;
}
.shop-card .product-btn__icon {
  right: 10px;
}

/*=====================================================================
共通:ページ枠(線が入る構成)
======================================================================= */
.page_inner{padding: 0 20px;}
.page_inner.margin_b{margin-bottom: 40px;}
.line_inner{padding: 30px 20px;}
	
/*=====================================================================
会社情報
======================================================================= */

.group_ttl{font-size: 20px; line-height: 1; font-weight:600; border-bottom: 1px solid #2d7a61; padding-bottom: 20px;}
.group_item{width: 100%;}
.group_item .fa_name{font-size: 16px; font-weight:600; line-height: 1.4; margin: 40px 0 12px;}
.group_item .fa_address{font-size: 14px; line-height:1.9; margin-bottom: 20px;}

	#message .body,#overview dl,#history.open ul.list,#history li{
		grid-template-columns: unset;
		justify-content: unset;
		}
	#message .body{
		grid-row-gap: 30px;
		}
	#overview dl{
		grid-row-gap: 20px;
		}
	#overview dt:last-of-type,#overview dd:last-of-type{
		border-bottom:0;
		}
	#history.open ul.list{
		grid-row-gap: 30px;
		}
	#history li{
		grid-row-gap: 10px;
		}
	#history.open li{
		grid-row-gap: 20px;
		}
	#history.open .year.same{
		visibility: visible;
		}
	#history.open ul.block_left,
	#history.open ul.block_right{
		padding-top: 0;
		border:0;
		}
	
	/* Message */
	#outline .block{grid-row-gap: 24px; margin-bottom: 50px;}
	#outline .block#message{grid-row-gap: 24px;}
	#outline .ttl span, #history .ttl span{margin-left: 14px; font-size: 12px;}
	#message .body{padding-bottom: 40px;}
	#message h3{font-size: 22px; line-height: 1.8;}
	#message .lead{grid-row-gap: 24px; font-size: 15px; line-height: 2;}

	/* Overview(dt/ddを縦積み) */
	#overview dl{grid-row-gap: 0; border-bottom: 1px solid #2d7a61;}
	#overview dt,#overview dd{padding: 0; font-size: 14px; line-height: 2;}
	#overview dt{padding: 18px 0 4px; border-top: 1px solid #2d7a61;}
	#overview dd{padding: 0 0 18px; border-top: 0;}
	#overview dd:last-of-type{border-bottom: 0;}

	/* CM */
	#cm .text{display: block; padding: 6px 0 6px 16px; font-size: 14px;}
	#cm .link{margin-top: 24px;}
	.cm_list{grid-template-columns: minmax(0, 1fr); grid-gap: 14px;}
	button.cm_item{height: 64px; padding: 0 16px 0 32px; border-radius: 64px;}
	.cm_name{font-size: 15px;}
	.cm_sub{font-size: 11px;}
	.cm_icon{width: 32px; height: 32px;}
	.cm_icon::before{border-width: 6px 0 6px 10px;}
	.cm_item.is-playing .cm_icon::before{width: 3px; height: 14px; border-width: 0 3px;}

	/* History */
	#history{padding: 40px 0;}
	#history .title{width: calc(100% - 40px); grid-template-columns: 1fr auto;}
	#history .btn_switch_display{height: 36px; grid-template-columns: 116px 20px; border-radius: 18px;}
	#history .btn_switch_display .label{font-size: 12px;}
	#history .btn_switch_display .icon{top: 8px;}
	#history .body{padding: 0 20px; margin-top: 24px;}
	#history ul{grid-column-gap: 16px;}
	#history ul.block_right:after{width: 4px;}
	#history li{width: 320px; min-height: 0; padding: 20px 24px; border-radius: 16px;}
	#history .year{font-size: 40px;}
	#history .month{font-size: 13px; padding-bottom: 5px;}
	#history p{font-size: 13px; line-height: 1.9;}
	#history.open li{width: auto; padding: 0;}
	#history.open ul.block_left,
	#history.open ul.block_right{grid-row-gap: 24px;}
	
	/* お知らせとの境目の線(二重になっていたので黒線を消す) */
	#news{border-top: 0;}

	/* 沿革:タイトルとカードの間を詰める */
	.content_area{grid-row-gap: 0;}
	#history .body{margin-top: 20px;}

	/* 沿革カード:年月と文章を詰める(余った高さを行間に配らない) */
	#history li{align-content: start; align-items: start; grid-row-gap: 4px;}
	#history .year{line-height: 1;}
	#history .month{padding-bottom: 3px;}
	#history.open li{grid-row-gap: 10px;}
	
	/* 切替ボタン:長い文字(スクロール表示)でもアイコンと重ならない幅に */
	#history .btn_switch_display{grid-template-columns: 132px 20px;}

	/* 一覧表示:PCと同じ「年バッジ｜月｜文章」の横並び */
	#history.open ul.list{grid-row-gap: 24px;}
	#history.open ul.block_left{border-top: 1px solid #2d7a61; padding-top: 30px;}
	#history.open ul.block_right{border: 0; padding-top: 0;}
	#history.open li{grid-template-columns: auto 1fr; grid-column-gap: 12px; grid-row-gap: 0; align-items: start;}
	#history.open .time{grid-template-columns: 76px 34px; grid-template-rows: 26px; grid-column-gap: 10px;}
	#history.open .year,#history.open .month{font-size: 13px;}
	#history.open .year.same{visibility: hidden;}
	#history.open p{font-size: 13px; line-height: 26px;}
	
	/* 沿革(スクロール表示):カードを高さ揃えにせず、中身の高さで止める */
	#history ul.list{align-items: start;}
	
		/* 一覧表示:下の余白を詰める */
	#history.open ul.block_right:after{display: none;}
	#history.open{padding-bottom: 40px;}

	
/*=====================================================================
ニュース一覧
======================================================================= */
	
#news{width: 100%; border-top: 0; margin: 0; padding:50px 0;}
#news .news_area{box-sizing: border-box; width: calc(100% - 60px); margin: 0 auto;}
#news .news_area .ttl{width: 100%; float: none; font-size:16px; letter-spacing: .04em; margin-bottom: 25px;}
#news .news_area .body{width: 100%; float: none;}
#news .news_area .body ul{padding: 0; margin: 0;}
    
#news .news_area .body li{border-bottom: 1px solid #beccb8; padding:0 0 25px 0; margin:0 0 25px 0;}
#news .news_area .body li:last-child{ margin-bottom: 0;}
    
#news .news_area .body .date{font-size: 12px; margin-bottom: 5px; font-weight: 500; letter-spacing: .04em;}
#news .news_area .body a{font-size: 14px; letter-spacing: .04em; text-decoration: none; position: relative;}
#news .news_area .body a::after{
  position: absolute;
  bottom: -7px;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  background: #3f7766;
  transform: scale(0, 1);
  transform-origin: right top;
  transition: transform .2s;
}
#news .news_area .body a:hover::after{
  transform-origin: left top;
  transform: scale(1, 1);
}
	
	
/*=====================================================================
ニュース詳細
======================================================================= */

.article_ttl{
	font-size: 18px;
	line-height: 1.6;
	padding-bottom: 20px;
	border-bottom: 1px solid #2d7a61;
}
	
.article_body{
	font-size: 14px;
	line-height: 190%;
}
	
.article_body img{max-width: 100%; height: auto;}
.article_body iframe{max-width: 100%;}
	
	
/*=====================================================================
お問い合せ
======================================================================= */
.page_inner.contact-page{padding: 0 30px 0 20px;}
.contact-page .line_inner{padding: 30px 25px 30px 25px;}
.contact-page__label{top: 20px; right: 9px; font-size: 9px;}

.cf-lead{font-size: 14px; line-height: 2;}
.cf-note{margin-top: 24px; padding: 20px 16px; font-size: 11px; line-height: 1.9;}
.cf-reqnote{margin-top: 28px; font-size: 12px;}
.cf-req{padding: 3px 8px 4px; font-size: 11px;}

.cf-form{margin-top: 32px;}
.cf-row{display: block; margin-top: 26px;}
.cf-label,
.cf-row--top .cf-label{display: block; min-height: 0; padding-top: 0; margin-bottom: 10px;}
.cf-name{gap: 10px; font-size: 14px;}
.cf-error{margin-top: 8px; font-size: 12px;}

.contact-page .cf-input{max-width: none; height: 52px; padding: 0 16px; font-size: 16px;}
.contact-page .cf-input.cf-input--short{max-width: none;}

.contact-page textarea.cf-input{height: 160px; padding: 14px 16px;}
.contact-page .cf-input::placeholder{font-size: 14px;}
.cf-select{width: 100%;}
.contact-page .cf-select .cf-input{padding-right: 56px;}
.cf-select::after{right: 14px; width: 28px; height: 28px; margin-top: -14px;}
.cf-field--radio{min-height: 44px;}
.contact-page .mwform-radio-field-text,
.contact-page .mwform-checkbox-field-text{font-size: 14px;}

.mw_wp_form_confirm .cf-field{padding: 0; font-size: 14px; line-height: 1.9;}

.cf-privacy{margin-top: 36px; padding: 28px 16px 32px;}
.cf-privacy__ttl{font-size: 16px;}
.cf-privacy__lead{margin-top: 16px; font-size: 11px; line-height: 1.9; text-align: left;}
.cf-acc{margin-top: 24px;}
.cf-acc__btn{padding: 20px 0; font-size: 14px;}
.cf-acc__icon{width: 26px; height: 26px;}
.cf-acc__body{padding-bottom: 24px; font-size: 11px; line-height: 2;}

.cf-agree{margin-top: 30px;}
.cf-buttons{margin-top: 28px;}
.contact-page .cf-btn,
a.cf-btn,
a.cf-btn:link,
a.cf-btn:visited{width: 100%; height: 62px; padding-right: 36px; font-size: 16px; background-size: 30px 1px; background-position: right 22px center;}
.contact-page .cf-btn.cf-btn--back{width: 200px; height: 46px; margin-bottom: 16px; font-size: 13px;}

.cf-done{padding: 0 0 0; text-align: left;}
.cf-done__ttl{font-size: 19px;}
.cf-done__text{margin-top: 22px; font-size: 13px; line-height: 2.1;}
.cf-done .cf-note{margin-top: 30px; padding: 24px 16px;}
.cf-done a.cf-btn,
.cf-done a.cf-btn:link,
.cf-done a.cf-btn:visited{margin-top: 30px;}
	
	
/*=====================================================================
Footer
======================================================================= */

footer{
	flex-direction: column;
	padding: 50px 29px 32px 12px;
	border-top-left-radius: 48px;
	border-top-right-radius: 48px;
}

footer .foot_left{flex: none; display: grid;}
footer .foot_right{display: contents;}

footer .footlogo{order: -1; align-self: flex-end; width: 107px; margin-bottom: 0;}
footer .footlogo img{display: block;}

/* 大きい文字とメニューを同じ場所に重ねる */
footer .split{grid-area: 1 / 1; margin: 30px 0 0;}
footer .split-text{font-size: 17.6vw;}
footer .split .blc02{margin: -1.8vw 0 0 0;}

footer .footmenu{grid-area: 1 / 1; position: static; transform: none; align-self: start; margin-top: 64px;}
footer .footmenu ul{margin: 0 0 0 25px;}
footer .footmenu ul li{margin: 0 0 22px 0; line-height: 1.2;}
footer .footmenu ul li:last-child{margin: 0;}
footer .footmenu li a{font-size: 16px;}

footer .footsub{margin-top: 34px; text-align: right;}
footer .footsub .link{font-size: 13px; margin-bottom: 46px;}
footer .footsub .link a{font-size: 20px; margin-right: 34px;}
footer .footsub .link a:last-child{margin-right: 0;}
footer .footsub .contact{display: flex; justify-content: flex-end; gap: 30px; font-size: 14px; margin-bottom: 20px;}
footer .footsub .copyright{font-size: 12px;}



/* Contact btn
------------------------------------------------------------------------ */

.contact_btn a{height: 98px; padding: 0 18px 0 39px;}
.contact_btn .en02{font-size: 26px;}
.contact_btn .ja{font-size: 12px;}
.contact_btn__arrow{width: 40px;}
.contact_btn__arrow img{width: 24px;}


/*=====================================================================
Animation
======================================================================= */

/* hover
------------------------------------------------------------------------ */
a.mo_fade{transition: all 0.3s ease;}
a.mo_fade:hover{opacity: 0.6; transition: all 0.2s ease;}

a.mo_fade2{transition: all 0.3s ease;}
a.mo_fade2:hover{opacity: 0.4; transition: all 0.2s ease;}



/* Newsサムネイル　hover拡大
------------------------------------------------------------------------ */

/* Hover Image */
a.hoverimg {
  display: block;
  transition: 0.3s ease-out;
    transform: scale(1.0);
}

a.hoverimg:hover {
  transform: scale(1.06);
  opacity: 0.75;
	transition: 0.15s ease-out;
}


/* スプリットテキスト */
.char-wrap {
  display:inline-block;
  overflow:hidden;
  vertical-align:bottom;
}
.char {
  display:inline-block;
  transform:translateY(100%);
  will-change:transform;
  white-space:pre;
}

.char.animate {
  animation-name:slideUp;
  animation-duration:0.6s;/* アニメーション間隔 */
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.22,.9,.35,1);
  /* animation-delay はJSで付ける */
}
.sr-only {
  position:absolute!important;
  width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}



/* 404
------------------------------------------------------------------------ */

.notfoundttl {width: 100%; text-align: center; font-size: 50px; letter-spacing:.02em; margin:40px 0 30px 0;}
.notfoundttl p{font-size: 15px; margin: 10px 0 0 0;}

.notfound_btn{width: 80%; margin: 0 auto 40px auto;}

.notfound_btn  a{
	 width: 100%; 
	height: 54px;
    font-size: 16px;
	border-radius: 30px;
	background-color: #2d7a61; 
	text-align: center; text-decoration: none;color: #FFF; 
	transition: all 0.3s ease;
/*　box要素縦中央 */
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center; /* 縦方向中央揃え（Safari用） */
 align-items: center; /* 縦方向中央揃え */
 -webkit-justify-content: center; /* 横方向中央揃え（Safari用） */
 justify-content: center; /* 横方向中央揃え */

}

.notfound_btn  a:hover{background-color: #409b7d; color: #FFF; transition: all 0.1s ease;}


}
/* responsive End */
/*===================================================================== */