@charset "UTF-8";
/*
Theme Name:arkhe-child
Template:arkhe
Version:3.7.1
*/

@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@300;400;600&family=Noto+Sans+JP:wght@300;400;700;900&display=swap');

:root {
  --ay-color-accent: #E22658;
}


/*** 全体の設定 ***/
body {
	--ark-font_family: 'League Spartan', 'Noto Sans JP', "游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic",sans-serif;
}
h2{
	font-size:2.4em
}
.arkb-marker{ /*下線引いた箇所を赤字に*/
    background: none;
    color: var(--ay-color-accent);
}

/*** 段落の文字サイズ設定 ***/
#content p, footer p{
	font-size: 14px;
}
@media screen and (max-width: 600px){
	#content p, footer p{
		font-size: 12px;
	}
}

/*999px以下*/
@media screen and (max-width: 999px){
	
}
/*600px以下*/
@media screen and (max-width: 600px){
	
}

/*** セクション見出し ***/
.ark-block-heading{
	margin-bottom:3em;
}
.ark-block-heading h2{
    font-weight: 400;
    font-size: 2rem;
}
.ark-block-heading .ark-block-heading__line:before {
    width: 5em;
}
@media screen and (max-width: 600px){
	.ark-block-heading{
		margin-bottom:1em;
	}
	.ark-block-heading h2{
		font-size: 1.6rem;
	}
}

/*** 料金表画像設定 ここはテスト***/
@media screen and (max-width: 600px){
	#selfiePlan .ark-block-section__body{
		padding-left:0;
		padding-right:0;
	}
}
.ark-block-button__link {
	font-size:1em;
	padding: 0.75em 1em;
	transition:none;
}

/*** ヘッダー設定 ***/
.l-header__body {
	padding: 0 2vw;
}
.c-gnav .__mainText {
	font-size:16px;
}
.c-gnavWrap .c-gnav a::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: var(--ay-color-accent);
bottom: -1px;
transform: scale(0, 1);
transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.5s;   /*変形の時間*/
}
.c-gnavWrap .c-gnav a:hover::after {
transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}
#header{
	background-color:rgba(255,255,255,0.8);
}
@media screen and (min-width: 1000px){
	#header{
		backdrop-filter: blur(3px);
	}
}
.sns-gnav > li > a{
	padding:12px 16px;
}
.sns-gnav .ay-globalMenu-yoyaku{
	margin-left:8px;
}
.ay-globalMenu-yoyaku{
	background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
	border-radius: 0.5rem;
	padding: 0.75em 1.25em;
	color: #ffffff;
	text-decoration: none;
	transition: 0.3s;
}
.ay-globalMenu-yoyaku span::before {
  content: "";
  display: inline-block;
  vertical-align: top;
  width: 1.4em;
  height: 1.4em;
  background: url('https://aystudiocafe.com/wp-content/uploads/2024/01/line-wh-fill.png') no-repeat;
  background-size: contain;
  margin-right: 0.4em;
  transform: translate(-2px,0);
}
.ay-globalMenu-yoyaku:hover{
	opacity: 0.8;
}
.w-drawerBottom{
	margin-bottom:3em; !important
}
.center{
	text-align:center;
}

/*** ドロワーメニュー ***/
.p-drawer .ay-globalMenu-yoyaku{
	padding: 1.25em 3em;
	border-radius: 1.75em;
}
.p-drawer div.center{
	margin:4em auto;
}

/*** フッター ***/
.ay-footer-button-bk .ark-block-button__link{
	border: solid 1px #fff;
}
@media screen and (min-width: 600px){
	.footer-left{
		border-right:1px dashed #fff;
	}
}

/*** ＳＮＳボタン ***/
.ark-block-buttons .line .ark-block-button__link{
	background-image: linear-gradient(90deg, rgba(144, 245, 154, 1), rgba(4, 202, 255, 1));
}
.ark-block-buttons .instagram .ark-block-button__link{
	background-image: linear-gradient(120deg, rgba(243, 196, 170, 1), rgba(228, 81, 154, 1) 50%, rgba(77, 84, 224, 1));
}

/*** instagramセクション ***/
@media screen and (max-width: 600px){
	#sb_instagram #sbi_images .sbi_item{
		padding: 3px !important;
	}
}

/*** 撮影流れ ***/
.ark-block-accordion {
	background-color:#fff;
}

/*** MENUタブ装飾 ***/
.ark-block-tab {
	box-shadow: 0 0 4px #c3c3c3;
}
.arkb-tabList{
    padding:1.2em 1em !important;
}
.arkb-tabList__button[aria-selected=true] {
    border-bottom-color: var(--ay-color-accent);
	font-weight:bold;
}
.arkb-tabList__button{
	padding: 1.5em 1em;
}
.arkb-tabList__item{
	transition:0.3s;
}
.arkb-tabList__item:hover{
	background-color:#f7f7f7;
}
/*料金記載のボタン、ホバー変化させない*/
.ay-button__non-link a{
	pointer-events: none;
}

/*==================================================
ふわっと動くCSS
===================================*/
/* fadeUp */
.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.4s;
animation-fill-mode:forwards;
opacity:0;

}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}
/* スクロールをしたら出現する要素にはじめに透過0を指定*/
.fadeUpTrigger{
    opacity: 0;
}
/*遅れて出現*/
.delay-time{
animation-delay: 0.3s;
}
.delay-time-05{
animation-delay: 0.5s;
}
.delay-time-07{
animation-delay: 0.7s;
}


/*** FAQ装飾 Arkhe公式 ***/
.arkp-scFaq02 {
    --arkp--item--bdr-color: #ddd;
    --arkp--icn--width: 40px;
    --arkp--icn--bgc--q: #444;
    --arkp--icn--color--q: #fff;
    --arkp--icn--bgc--a: #ddd;
    --arkp--icn--color--a: #fff;
}
.arkp-scFaq02 .ark-block-accordion__item {
    border: 1px solid var(--arkp--item--bdr-color);
    border-radius: var(--arkp--item--bdr-radius);
}
.arkp-scFaq02 .ark-block-accordion__title {
  font-weight: bold;
  padding: 1em 1em;
  background: none;
}
.arkp-scFaq02 .ark-block-accordion__title::before {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  content: "Q";
  width: var(--arkp--icn--width);
  height: var(--arkp--icn--width);
  background: var(--arkp--icn--bgc--q);
  color: var(--arkp--icn--color--q);
  font-size: 115%;
  font-weight: normal;
  margin-right: .75rem;
  border-radius: 50%;
}
.arkp-scFaq02 .ark-block-accordion__body {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.arkp-scFaq02 .ark-block-accordion__body .wp-block {
  /* for editor */
  margin-left: 0;
  margin-right: 0;
}
.arkp-scFaq02 .ark-block-accordion__body::before {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  content: "A";
  width: var(--arkp--icn--width);
  height: var(--arkp--icn--width);
  background: var(--arkp--icn--bgc--a);
  color: var(--arkp--icn--color--a);
  font-size: 115%;
  font-weight: normal;
  margin-right: .75rem;
  border-radius: 50%;
}
.arkp-scFaq02 .ark-block-accordion__body > p {
  padding-top: .4rem;
}