@charset "utf-8";

/* ① 変数の登録（グローバルに定義） */
:root {
	--main-color: #19AAC7;
	--sub-color: #d1eff4;
	--text-color: #24bad8;
	--yellow: #FFF500;
    --green: #00796B;
}

/* ----------------------------------------------------------------------
 user reset
---------------------------------------------------------------------- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  vertical-align: baseline;
  background: transparent;
  list-style: none;
}
table {
  border-collapse: collapse;
}
ul {
    list-style: none;
}
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
h5 {
	font-weight: 500;;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: border-box;
}

body, html {
    overflow-x: hidden;
}

html {
    font-size: 50%;
	scroll-behavior: smooth;
}
@media (min-width: 1025px) {
	html {
		font-size: 62.5%;
		scroll-behavior: smooth;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
}


body {
	margin: 0;
	background-color: #fff;
	font-family: YakuHanJP, "A-OTF UD新ゴ Pro", "Noto Sans JP", sans-serif, "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
	line-height: 1.7;
    font-weight: 400;
    font-size: 1.6rem;
}
body::after {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.08;
	z-index: -10; /* heroのcanvasより後ろにする */
}

@media (min-width:1025px) {
    body::after {
        background-image: url("../images/watermark_tiled_tab.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
}

@media (min-width: 1500px) {
    body::after {
        background-image: url("../images/watermark_tiled.png");
        background-repeat: no-repeat;
        background-size: cover;
    }
}

img.responsive {
	max-width: 100%;
	height: auto;
}

img{
	-webkit-backface-visibility: hidden;
	vertical-align: bottom;
}

main {
    /* ヘッダーがfixedなので、その高さ分だけmainの上部に余白を作る */
    padding-top: 4rem;
}
@media (min-width: 768px) {
    main {
        padding-top: 8rem;
    }
}

.main-color {
	color: var(--main-color);
}

.green {
	color: var(--green);
}

.text-color {
    color: var(--text-color);
}

.bg-gray {
    background-color: #f7f7f7;
}

.bg-white {
    background-color: #fff;
}


/* ----------------------------------------------------------------------
 layout
---------------------------------------------------------------------- */
.flex {
    display: flex;
}

.fl-reverse {
	flex-direction: row-reverse;
}

.fl-wrap {
    flex-wrap: wrap;
}

.fl-column {
    flex-direction: column;
}

.fl-center {
    justify-content: center;
    align-items: center;
}

.fl-between {
    flex-wrap: wrap;
    justify-content: space-between;
}

.fl-justify {
    justify-content: center;
}

.fl-around {
    justify-content: space-around;
}

.fl-end {
	justify-content: flex-end;
}

.fl-start {
	justify-content: flex-start;
}

.fl-align-center {
    align-items: center;
}

.fl-align-start {
    align-items: flex-start;
}

.fl-align-self-start-only {
	align-self: flex-start;
}

.fl-align-self-end {
	align-self: center;
}
@media (min-width: 768px) {	
	.fl-align-self-end {
		align-self: flex-end;
	}
}

.fl-align-self-start {
	align-self: center;
}
@media (min-width: 768px) {	
	.fl-align-self-start {
		align-self: flex-start;
	}
}

.col-2 {
    width: 100%;
}
@media (min-width:768px) {
	.col-2 {
		width: 50%;
	}
}

.col-xs-2 {
    width: 50%;
}
.col-xs-2-sub {
    width: 48.5%;
}

/* sub-page */
.col-2-sub {
    width: 100%;
}
@media (min-width:1025px) {
	.col-2-sub {
		width: 48.5%;
	}
}

.col-3{
    width: 100%;
}
@media (min-width:768px) {
	.col-3 {
		width: 31%;
	}
}

.col-xs-3 {
    width: 48%;
}
@media (min-width:768px) {
	.col-xs-3 {
		width: 31%;
	}
}

.col-3-sp {
    width: 26%;
}
@media (min-width:768px) {
	.col-3-sp {
		width: 31%;
	}
}

.col-4 {
    width: 48%;
}
@media (min-width:768px) {
	.col-4 {
		width: calc(25% - 1px);
	}
}


.contents{
	max-width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
	margin-right: auto;
    margin-left: auto;
}
@media (min-width:768px) {
	.contents{
        width: 94%;
    }
}
@media (min-width: 1025px) {
	.contents{
        width: 100rem;
    }
}

/* wave */
.top-section {
    background-color: #ffffff; /* 上のセクションの背景色（白） */
    padding: 20px;
    text-align: center;
    flex: 1;
    position: relative; /* wave-container の絶対位置付けの基準 */
    z-index: 1; /* 他の要素より前面に表示 */
}

.bottom-section {
    padding: 30px;
    text-align: center;
    flex: 1;
    /* グラデーション背景の追加 */
    background: linear-gradient(to bottom, #e5fafc, #ffffff);
    z-index: 1;
}
@media (min-width: 1025px) {
    .bottom-section {
        padding: 40px;
    }
}

.wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* 波の高さを増やす */
    overflow: hidden; /* 波がはみ出さないようにする */
    z-index: 0; /* 他の要素の背面に配置 */
}
@media (min-width:768px) {
    .wave-container {
        height: 150px; /* 波の高さを増やす */
    }
}

.wave-container svg {
    width: 100%;
    height: 100%;
}

/* position */
.p-relative {
	position: relative;
}

/* ----------------------------------------------------------------------
 テキスト
---------------------------------------------------------------------- */

.text-c{
    text-align: center;
}

.text-r{
    text-align: right;
}

.text-lc,.text-l,.text-lr {
    text-align: left;
}

.text-cl{
    text-align: center;
}

@media (min-width:768px) {
	.text-lc {
		text-align: center;
	}
	.text-cl {
		text-align: left;
	}
	.text-lr {
		text-align: right;
	}
}
.no-break {
  white-space: nowrap;
}

/* インデント */
.indent-1 {
    padding-left: .5em;
    text-indent: -.5em;
}

.en {
    font-family: "DIN 2014","Montserrat", sans-serif;
    font-weight: 500;
    letter-spacing: .05em;
}

.fs-100 {
    font-size: 7.5rem;
}
@media (min-width:768px) {
    .fs-100 {
        font-size: 10rem;
    }   
}

.fs-54 {
    font-size: 4rem;
}
@media (min-width:768px) {
    .fs-54 {
        font-size: 5.4rem;
    }   
}

.fs-46 {
    font-size: 3.45rem;
}
@media (min-width:768px) {
    .fs-46 {
        font-size: 4.6rem;
    }   
}

.fs-40 {
    font-size: 3rem;
}
@media (min-width:768px) {
    .fs-40 {
        font-size: 4rem;
    }   
}

.fs-30 {
    font-size: 2.25rem;
}
@media (min-width:768px) {
    .fs-30 {
        font-size: 3rem;
    }   
}


.fs-24 {
    font-size: 1.9rem;
}
@media (min-width:768px) {
    .fs-24 {
        font-size: 2.4rem;
    }   
}

.fs-22 {
    font-size: 2rem;
}
@media (min-width:768px) {
    .fs-22 {
        font-size: 2.2rem;
    }   
}


.fs-20 {
    font-size: 1.7rem;
}
@media (min-width:768px) {
    .fs-20 {
        font-size: 2rem;
    }   
}

.fs-19 {
    font-size: 1.6rem;
}
@media (min-width:768px) {
    .fs-19 {
        font-size: 1.9rem;
    }   
}

.fs-18 {
    font-size: 1.5rem;
}
@media (min-width:768px) {
    .fs-18 {
        font-size: 1.8rem;
    }   
}

.fs-17 {
    font-size: 1.4rem;
}
@media (min-width:768px) {
    .fs-17 {
        font-size: 1.7rem;
    }   
}


.fw-400 {
    font-weight: 400;
}

.fw-500 {
    font-weight: 500;
}

.fw-600 {
    font-weight: 600;
}

.fw-700 {
    font-weight: 700;
}

/* checkbox */
.fas.fa-check-square {
    margin-right: 8px;
    color: var(--main-color);
}


.line-20 {
    line-height: 2;
}

.line-27 {
    line-height: 2.7;
}


/* ----------------------------------------------------------------------
 border
---------------------------------------------------------------------- */
.custom-dashed-line {
    border: none;
    border-top: 2px dashed var(--text-color, #24bad8);
    color: transparent;
    background-color: transparent;
    height: 1px;
    width: 100%;
  }

/* ----------------------------------------------------------------------
 スマホ特例
---------------------------------------------------------------------- */
@media (max-width:400px) {
	.hero-iphone-se {
		margin-bottom: 6rem !important;
	}
}	
@media (max-width:1023px) {
	.sp-column {
		flex-direction: column;
	}
	.sp-center{
		text-align: center;
	}
	.sp-mgn {
		padding-left: 2.5rem;
		padding-right: 2.5rem;
	}
	.sp-mt-1 {
		margin-top: 1rem;
	}
	.sp-mt-2 {
		margin-top: 2rem;
	}
	.sp-mt-3 {
		margin-top: 3rem;
	}
	.sp-mt-5 {
		margin-top: 5rem;
	}
	.sp-mt-8 {
		margin-top: 8rem;
	}
	.sp-mt-10 {
		margin-top: 10rem;
	}
	.and-more {
		width: 48vw;
	}
}

/* ----------------------------------------------------------------------
 タブレット特例
---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.tb-mt-3 {
		margin-top: 3rem;
	}

	.tb-mt-8 {
		margin-top: 8rem;
	}
}

/* ----------------------------------------------------------------------
 margin
---------------------------------------------------------------------- */
.mt-1{
    margin-top: 1rem;
}
.mt-2{
    margin-top: 2rem;
}
.mt-3{
    margin-top: 1.5rem;
}
@media (min-width: 768px) {
	.mt-3{
	   	margin-top: 3rem;
	}
}
.mt-5 {
	margin-top: 2.5rem;
}
@media (min-width: 768px) {
	.mt-5{
	   	margin-top: 5rem;
	}
}

.mt-6 {
	margin-top: 3rem;
}
@media (min-width: 768px) {
	.mt-6{
	   	margin-top: 6rem;
	}
}

.mt-7 {
	margin-top: 3.5rem;
}
@media (min-width: 768px) {
	.mt-7{
	   	margin-top: 7rem;
	}
}

.mt-8 {
	margin-top: 4rem;
}
@media (min-width: 768px) {
	.mt-8{
	   	margin-top: 8rem;
	}
}

.mt-10{
    margin-top: 5rem;
}
@media (min-width: 768px) {
	.mt-10{
	   	margin-top: 10rem;
	}
}
.mt-15{
    margin-top: 5rem;
}
@media (min-width: 768px) {
	.mt-15{
	   	margin-top: 15rem;
	}
}
.mt-20{
    margin-top: 5rem;
}
@media (min-width: 768px) {
	.mt-20{
	   	margin-top: 20rem;
	}
}

.mt-25{
    margin-top: 8rem;
}
@media (min-width: 768px) {
	.mt-25{
	   	margin-top: 25rem;
	}
}

.mb-3{
    margin-bottom: 2rem;
}
@media (min-width: 768px) {
	.mb-3{
	   	margin-bottom: 3rem;
	}
}

.mb-5{
    margin-bottom: 3rem;
}
@media (min-width: 768px) {
	.mb-5{
	   	margin-bottom: 5rem;
	}
}

.mb-10{
    margin-bottom: 5rem;
}
@media (min-width: 768px) {
	.mb-10{
	   	margin-bottom: 10rem;
	}
}

.mb-15{
    margin-bottom: 7.5rem;
}
@media (min-width: 768px) {
	.mb-15{
	   	margin-bottom: 15rem;
	}
}

.mb-20{
    margin-bottom: 10rem;
}
@media (min-width: 768px) {
	.mb-20{
	   	margin-bottom: 20rem;
	}
}

.pd-seciton {
	padding-top: 8rem;
	padding-bottom: 8rem;
}
@media (min-width: 768px) {
	.pd-seciton {
		padding-top: 10rem;
		padding-bottom: 10rem;
	}
}

.pd-1 {
    padding: 1rem;
}

.pd-2 {
    padding: 2rem;
}

.pd-3 {
    padding: 2rem;
}
@media (min-width: 1025px) {
	.pd-3 {
		padding: 3rem;
	}
}

.pd-5 {
    padding: 3rem;
}
@media (min-width: 1025px) {
	.pd-5 {
		padding: 5rem;
	}
}

.pd-8 {
    padding: 5rem;
}
@media (min-width: 1025px) {
	.pd-8 {
		padding: 8rem;
	}
}

.pd-tb-3 {
	padding: 3rem 0;
}

.pd-tb-10 {
    padding: 5rem 0;
}
@media (min-width: 768px) {
    .pd-tb-10 {
        padding: 10rem 0;
    }
}

/* ----------------------------------------------------------------------
 表示・非表示
---------------------------------------------------------------------- */

.sp-only-on {
    display: block;
   }
@media (min-width: 768px) {
	.sp-only-on {
        display: none;
    }
}

.tab-on {
    display: none;
}
@media (min-width: 768px) {
	.tab-on {
		display: block;
	}
}

.sp-on {
    display: block;
   }
@media (min-width: 1025px) {
	.sp-on {
        display: none;
    }
}

.pc-on {
    display: none;
}
@media (min-width: 1025px) {
	.pc-on {
		display: block;
	}
}


/* ----------------------------------------------------------------------
 動画埋め込み
---------------------------------------------------------------------- */
.movie-wrap {
    position: relative;
    padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
    height: 0;
    overflow: hidden;
    margin: 1rem auto 5rem auto;
}

.movie-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media (min-width: 1025px) {
	.movie-wrap {
		margin: 6rem auto 10rem auto;
		width: 100%;
	}
}

/* ----------------------------------------------------------------------
 GoogleMap埋め込み
---------------------------------------------------------------------- */
.gmap {
	height: 0;
	overflow: hidden;
	padding-bottom: 56.25%;
	position: relative;
}
.gmap iframe {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
}
	

/* ----------------------------------------------------------------------
サイト共通
---------------------------------------------------------------------- */
header{
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	height: 4rem;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99;
	background: var(--main-color);
}
@media (min-width: 768px) {
	header{
		height: 8rem;
	}
}
header img {
	margin-left: 1.5rem;
	width: 150px;
}
@media (min-width: 768px) {
	header img {
		margin-left: 3rem;
		width: 250px;
	}
}

/* ----------------------------------------------------------------------
hero
---------------------------------------------------------------------- */
#hero-container {
	width: 100%; /* vwから%に変更 */
	height: 88vh;
	position: relative;
    display: flex; /* flexを追加して中央揃え */
    align-items: center;
    justify-content: center;
    overflow: hidden; /* canvasのはみ出し防止 */
}
@media (min-width: 1025px) {
	#hero-container {
        height: 100vh;
	}
}

#hero-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* contentより後ろ */
}

.hero-content {
	position: relative; /* absoluteから変更 */
	z-index: 10;
	width: 100%;
    padding: 0 1.5rem;
}
@media (min-width: 768px) {
	.hero-content {
		width: 94%;
        padding: 0;
	}
}
@media (min-width: 1025px) {
	.hero-content {
		width: 120rem; /* contentsクラスに合わせる */
	}
}


.hero-content h1 {
	font-size: 4.8rem;
    font-weight: 500;
	line-height: 1.2;
	margin: 0;
}
@media (min-width: 768px) {
	.hero-content h1 {
		font-size: 5.8rem;
	}
}
@media (min-width: 1025px) {
	.hero-content h1 {
		font-size: 7.8rem;
	}
}

.hero-content h1 ruby rt {
	font-size: 1.1rem;
	line-height: 1.2;
}
@media (min-width: 768px) {
    .hero-content h1 ruby rt {
        font-size: 1.3rem;
    }
}


.hero-content h2 {
	font-size: 2rem;
	line-height: 1.2;
}
@media (min-width: 768px) {
	.hero-content h2 {
		font-size: 2.4rem;
	}
}
@media (min-width: 1025px) {
    .hero-content h2 {
        font-size: 3rem;
    }
}

.mt-hero{
    margin-top: 1.2rem;
}

.video-mask {
	width: 78vw;
	height: 200px;
	position: relative;
	overflow: hidden;
	border-radius: 50% / 50%;
	margin-left: auto;
	margin-right: auto;
}
@media (min-width: 376px) {
	.video-mask {
		width: 86vw;
		height: 300px;
	}
}
@media (min-width: 768px) {
	.video-mask {
		width: 600px;
  		height: 450px;
	}
}
.video-mask video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.8);
}


/* テキストキャッチ */
.text{
	display: flex;
    flex-wrap: wrap; /* スマホで改行されるように */
	color: var(--text-color);
	font-family: "Roboto Mono",monospace;
	font-size: 3.8vw;
	font-weight:700;
	z-index: 9;
	letter-spacing: .1em;
	justify-content:center;
}
@media (min-width: 768px) {
	.text {
		font-size: 1.8vw;
	}
}
@media (min-width: 1025px) {
	.text {
		font-size: 3rem;
	}
}
.text.is-active{
	--opacity:1;
	--scale:1;
}
.char {
	display:inline-block;
	opacity:var(--opacity,0);
	transform:scale(var(--scale,0));
	transition:
		opacity .4s cubic-bezier(.77,0,.175,1),
		transform .4s cubic-bezier(.39,.575,.565,1);
	transition-delay:calc(.016s * var(--char-index));
}

/* ----------------------------------------------------------------------
ボタン
---------------------------------------------------------------------- */
.btn {
	display: inline-block; /* blockから変更 */
	height: 40px;
	line-height: 34px;
	text-align: center;
	font-weight: 500;
	border-radius: 60px;
	padding: 0 1.5rem; /* paddingを追加 */
	min-width: 260px;
	text-decoration: none;
	font-size: 1.6rem; /* サイズ調整 */
}
@media (min-width: 1025px) {
	.btn {
		height: 60px;
		line-height: 54px;
		width: 435px;
        font-size: 1.8rem;
	}
}
.btn:hover {
	transition: all .2s;
}
.btn-color {
	color: #000;
	background:  var(--yellow);
	border: 3px solid var(--yellow);
}
.btn-color:hover {
	background: #fff;
	color: #000;
}




/* ----------------------------------------------------------------------
 見出し
---------------------------------------------------------------------- */
.custom-decorated-title {
    position: relative;
    padding: 2rem 3rem;
    border-bottom: 2px solid var(--text-color, #24bad8);
    color: var(--main-color);
    font-weight: 500;
    font-size: 2.6rem;
    text-align: center;
    line-height: 1.4;
    background: #fff;
  }
  @media (min-width: 768px) {
    .custom-decorated-title {
        padding: 3rem 0;
        font-size: 4.6rem;
    }
  }

  .custom-decorated-title::before,
  .custom-decorated-title::after {
    position: absolute;
    top: 100%;
    left: 50%;
    content: "";
    height: 0;
    width: 0;
    border-style: solid; /* border-style を明示 */
  }
  
  /* 外側の三角形 (下線の色と同じ) */
  .custom-decorated-title::before {
    border-width: 13px; /* ユーザー指定のサイズ */
    border-color: transparent;
    border-top-color: var(--text-color, #24bad8); /* 線色を指定 */
    margin-left: -13px; /* 中央揃えのため、border-widthと同じ値を負で指定 */
  }
  
  /* 内側の三角形 (背景色でマスクする役割) */
  .custom-decorated-title::after {
    border-width: 10px; /* ユーザー指定のサイズ */
    border-color: transparent;
    border-top-color: white; /* 下線をくり抜く色（通常は背景色） */
    margin-left: -10px; /* 中央揃えのため、border-widthと同じ値を負で指定 */
    /* ::before より少し上に表示して、重なり順を調整 */
    /* top: calc(100% - 2px); /* 微調整が必要な場合 */
  }
  
  /* 強調テキストの色 (オプション) */
  .custom-decorated-title .highlight-text-color {
    color: var(--text-color, #24bad8);
  }


/* サブタイトル */
.section-subtitle {
    color: black;
    font-size: 1.8rem;
    line-height: 1.9;
    text-align: center;
  }
@media (min-width: 768px) {
    .section-subtitle {
        font-size: 2.6rem;
        line-height: 1.9;
    }    
}
  
  /* 各行のテキストに適用する点線下線スタイル */
  .text-dotted-underline {
    border-bottom: 2px dotted var(--text-color, #24bad8);
    padding-bottom: 3px;
    display: inline;
}



/* ----------------------------------------------------------------------
 こんな悩み
---------------------------------------------------------------------- */

.problem-list li {
    font-size: 1.8rem;
    font-weight: 400;
    color: var(--text-color);

}
@media (min-width:768px) {
    .problem-list li {
        font-size: 2.4rem;
    }   
}

.problem-list li .fas.fa-check-square {
    margin-right: 8px;
}


/* 吹き出し */
.speech-bubble {
    position: relative;
    display: inline-block;
    padding: 1em;
    background-color: #e5fafc;
    border-radius: 10px;
    font-size: 2rem;
}

@media (min-width: 768px) {
    .speech-bubble {
        padding: 1.5em;
    }
}

.speech-bubble.compact {
    padding: .5em 1em;
}
@media (min-width: 768px) {
    .speech-bubble.compact {
        padding: 1.2em 1.5em;
    }
}

.speech-bubble::after {
    content: "";
    position: absolute;
    bottom: -19px;
    left: 50%;
    transform: translateX(-50%);
    border-width: 20px 15px 0 15px;
    border-style: solid;
    border-color: #e5fafc transparent transparent transparent;
}


/* 吹き出し（アイコン付き） */
.speech-bubble-wrapper.with-avatar {
    position: relative;
    padding-left: 90px; /* アイコンの幅(120px) + 余白(10px) */
    min-height: 80px;   /* アイコンの高さに合わせる */
    display: flex;
    align-items: center;
    text-align: left; /* アイコン追加時にテキストを左揃えにする */
}

@media (min-width: 768px) {
    .speech-bubble-wrapper.with-avatar {
        padding-left: 140px;
        min-height: 120px;
    }
}

.speech-bubble-wrapper.with-avatar::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;  /* アイコンのサイズ */
    height: 80px; /* アイコンのサイズ */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media (min-width: 768px) {
    .speech-bubble-wrapper.with-avatar::before {
        width: 120px;
        height: 120px;
    }
}


.speech-bubble-wrapper.with-avatar .speech-bubble {
    margin: 0;
    text-align: left;
    width: auto; /* width: 100% から auto に変更 */
}

.speech-bubble-wrapper.with-avatar .speech-bubble::after {
    /* アイコン付きの場合は、吹き出しの矢印を左に調整 */
    left: -15px;
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
}

/* 各アイコンの設定 */
.speech-bubble-wrapper.avatar-icon-1::before {
    background-image: url('../images/icon_01.png');
}
.speech-bubble-wrapper.avatar-icon-2::before {
    background-image: url('../images/icon_02.png');
}
.speech-bubble-wrapper.avatar-icon-3::before {
    background-image: url('../images/icon_03.svg');
}
.speech-bubble-wrapper.avatar-icon-4::before {
    background-image: url('../images/icon_04.png');
}


/* ----------------------------------------------------------------------
 Case Studies (導入事例)
---------------------------------------------------------------------- */

.case-study-image {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    border-radius: 50%;
    overflow: hidden;
    aspect-ratio: 1 / 1; /* 正円を維持 */
}
@media (min-width:1025px) {
	.case-study-image {
		width: 36%;
	}
}

.case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像がコンテナを歪まずに埋めるように */
}

.case-study-content {
    position: relative;
    padding-left: 2rem;
    width: 100%;
}
@media (min-width:1025px) {
	.case-study-content {
		width: 56%;
	}
}

.case-study-title {
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--main-color);
}
@media (min-width: 768px) {
	.case-study-title {
		font-size: 3rem;
	}
}

.label-kadai {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* ラベルが縮まないようにする */
    width: 8.8rem;
    height: 8.8rem;
    background-color: var(--main-color);
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    border-radius: 50%;
    margin-right: 2rem;
}





/* ----------------------------------------------------------------------
+a Section
---------------------------------------------------------------------- */

.plus-alpha-svg-con {
    height: 460px;
    margin-bottom: -20rem;
}
@media (min-width:560px) {
    .plus-alpha-svg-con {
        height: 600px;    
    }
}
@media (min-width:768px) {
    .plus-alpha-svg-con {
        height: 400px;    
    }
}

.plus-alpha-svg {
    position: absolute;
    left: 0;
    z-index: 2;
    max-width: 1500px;
    width: 98vw;
}

@media (min-width:1920px) {
    .plus-alpha-svg {
        max-width: 1800px;
    }
}

.plus-alpha-svg-sp {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 80vw;
}

.highlight-text {
    display: inline; /* inlineにして背景がテキスト幅に追従するように */
    background: linear-gradient(transparent 60%, var(--yellow) 60%);
    font-weight: 500;
    font-size: 2rem;
    padding: 0 0.2em;
    color: var(--main-color);
}
@media (min-width: 768px) {
    .highlight-text {
        font-size: 3rem;
    }
}

.info-section {
    overflow: hidden;
  }
  
.info-section-title {
    background-color: var(--main-color);
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-weight: 500;
}
@media (min-width: 768px) {
    .info-section-title {
        padding: 10px 15px;
    }
}

.info-section-title-green {
    background-color: var(--green);
    color: white;
    padding: 5px 10px;
    text-align: center;
    font-weight: 500;
}
@media (min-width: 768px) {
    .info-section-title-green {
        padding: 10px 15px;
    }
}


.info-section-content {
    background-color: #E7F7F9;
    padding: 3rem;
    line-height: 1.8;
}
@media (min-width: 768px) {
    .info-section-content {
        padding: 3rem 5rem;
    }
}

.info-box-dashed {
    border: 2px dashed #b0e0e6;
    padding: 1.5rem;
    text-align: center;
    background: #fff;
}
@media screen and (min-width: 768px) {
    .info-box-dashed {
        padding: 2rem;
    }
}


.experiment-box {
    border: 2px solid #b0e0e6;
    margin: 2em 0;
}

.experiment-header {
    background-color: #e5fafc;
    padding: 1em;
    text-align: center;
}




/* ----------------------------------------------------------------------
 SDGs Section
---------------------------------------------------------------------- */

.sdg-header {
    display: flex;
    align-items: baseline;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--main-color);
}

.sdg-number {
    font-size: 3.8rem;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1;
    margin-right: 1.5rem;
}
@media (min-width: 768px) {
    .sdg-number {
        font-size: 5rem;
    }
}

.sdg-title {
    font-size: 2.8rem;
    font-weight: 500;
    color: var(--main-color);
}
@media (min-width: 768px) {
    .sdg-title {
        font-size: 4.6rem;
    }
}

.sdg-goal-label {
    display: inline-block;
    background-color: var(--sub-color);
    color: var(--main-color);
    padding: 0.5rem 1.5rem;
    margin-top: 3rem;
    margin-bottom: 3rem;
}
@media (min-width: 768px) {
    .sdg-goal-label {
        font-size: 1.6rem;
    }
}



/* ----------------------------------------------------------------------
 Flow Section (導入の流れ)
---------------------------------------------------------------------- */
/* wave-flow */
.top-section-flow {
    background-color: #ffffff; /* 上のセクションの背景色（白） */
    padding: 20px;
    text-align: center;
    flex: 1;
    position: relative; /* wave-container の絶対位置付けの基準 */
    z-index: 1; /* 他の要素より前面に表示 */
}

.wave-container-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 80px; /* 波の高さを増やす */
    overflow: hidden; /* 波がはみ出さないようにする */
    z-index: 0; /* 他の要素の背面に配置 */
}
@media (min-width:768px) {
    .wave-container-flow {
        height: 150px; /* 波の高さを増やす */
    }
}

.wave-container-flow svg {
    width: 100%;
    height: 100%;
}


/* flow-contents */
.flow-section {
    background: linear-gradient(to bottom, #e5fafc, #ffffff);
    padding-top: 10rem;
}

.col-flow-img {
    width: 100%;
    text-align: center;
}
@media (min-width:768px) {
    .col-flow-img {
        width: 31.6%;
    }
}
.col-flow-img img {
    width: 100%;
}

.col-flow-text {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    padding-bottom: 2rem;
}
@media (min-width:768px) {
    .col-flow-text {
        width: 63%;
        margin-top: 0;
        padding-bottom: 0;
    }
}

.flow-note {
    width: 92%;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width:768px) {
    .flow-note {
        width: 100%;
    }
}


/* ----------------------------------------------------------------------
 FAQ Section
---------------------------------------------------------------------- */
.faq-section {
    background-color: #f0f8fa; /* Light teal background */
}

.accordionbox {
    max-width: 900px;
    margin: 5rem auto 0;
}

.accordionlist {
    margin-bottom: 3rem;
}
.accordionlist:first-child {
   
}

.accordionlist dt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
    cursor: pointer;
    background-color: #fff;
    transition: background-color 0.3s;
}

.question {
    font-size: 1.6rem;
    font-weight: 500;
    padding-left: 3rem;
    position: relative;
    color: #333;
}
@media (min-width: 768px) {
    .question {
        font-size: 1.8rem;
        padding-left: 4rem;
    }
}
.question::before {
    content: 'Q.';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--main-color);
    font-size: 2rem;
    font-weight: 700;
}

.accordion_icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-left: 2rem;
}
.accordion_icon span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 2px;
    background-color: var(--main-color);
    transform: translate(-50%, -50%);
    transition: transform 0.3s;
}
.accordion_icon span:last-child {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* Active state */
.accordionlist dt.active {
    background-color: var(--main-color);
}
.accordionlist dt.active .question {
    color: #fff;
}
.accordionlist dt.active .question::before {
    color: #fff;
}
.accordionlist dt.active .accordion_icon span {
    background-color: #fff;
}
.accordionlist dt.active .accordion_icon span:last-child {
    transform: translate(-50%, -50%) rotate(0deg);
}


.accordionlist dd {
    display: none; /* Initially hidden by JS */
    background-color: #fff;
}
.answer {
    padding: 2rem 4rem 3rem;
}
@media (min-width: 768px) {
    .answer {
        padding: 2rem 6rem 3rem;
    }
}
.answer p {
    font-size: 1.6rem;
    line-height: 1.8;
}

/* ----------------------------------------------------------------------
 Final CTA Section
---------------------------------------------------------------------- */
.final-cta-section {
    position: relative;
    padding: 8rem 2rem;
    color: #fff;
    text-align: center;
    background-image: url('../images/contact-area.svg'); /* 背景画像を指定 */
    background-size: cover;
    background-position: center center;
}
@media (min-width: 768px) {
    .final-cta-section {
        padding: 12rem 2rem;
    }
}
/* 背景画像の上に半透明のオーバーレイをかける */
.final-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* 暗めのオーバーレイ */
    z-index: 1;
}

/* テキストやボタンはオーバーレイより手前に表示 */
.final-cta-content {
    position: relative;
    z-index: 2;
}

.final-cta-title {
    font-size: 2.8rem;
    font-weight: 500;
}
@media (min-width: 768px) {
    .final-cta-title {
        font-size: 3.6rem;
    }
}

.final-cta-text {
    font-size: 1.6rem;
    margin-top: 1rem;
}
@media (min-width: 768px) {
    .final-cta-text {
        font-size: 1.8rem;
    }
}

/* ----------------------------------------------------------------------
 Company Information Section
---------------------------------------------------------------------- */

.info-table {
    width: 100%;
    border-top: 1px solid var(--sub-color);    
    border-collapse: collapse;
}

.info-table tr {
    border-top: 1px solid var(--sub-color);
}

.info-table tr:first-child {
    border-top: none;
}

.info-table th,
.info-table td {
    display: block; /* thとtdを縦に積むための設定 */
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.info-table th {
    background-color: #e5fafc;
    color: var(--main-color);
    font-weight: 500;
    font-size: 1.8rem;
    padding: 1.5rem;
    border-bottom: 1px solid var(--sub-color);
}

.info-table td {
    padding: 2.5rem;
    font-size: 1.8rem;
    font-weight: 500;
    line-height: 1.8;
    background-color: #fff;
}

.info-table a {
    color: #333;
    text-decoration: none;
}
.info-table a:hover {
    color: var(--main-color);
    text-decoration: underline;
}

.footer-address {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: left;
    max-width: 70rem;
    margin-left: auto;
    margin-right: auto;
}

.footer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 3rem;
}
@media (min-width: 768px) {
    .footer-logos {
        gap: 5rem;
    }
}
.footer-logos img {
    height: 65px;
    width: auto;
}
@media (min-width: 768px) {
    .footer-logos img {
        height: 160px;
    }
}

.copyright {
    font-size: 1.4rem;
}