@charset "UTF-8";
/* CSS Document */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    /* outline: 1px solid red !important; は確認が終わったら消してください */
}

html, body {
    width: 100%;
    overflow-x: hidden;
    /* スワイプによる更新や戻る挙動を制限してガタつきを抑える（任意） */
    overscroll-behavior-x: none;
	overflow-y: scroll; /* 常に縦スクロールバーの領域を確保する */
	overscroll-behavior-x: none;
}
.header-container {
    position: fixed; /* 画面に対して固定 */
    top: 12px;
    left: 0;     /* 左側の余白 */
    z-index: 1000;
    transition: transform 0.3s ease; /* アニメーションの速度 */
	width: 100%;
    left: 0;
    right: 0;
    overflow: hidden; /* ヘッダー内のはみ出しもカット */
  }
.logo-box {
    width: 260px;
    height: 40px;
    background-color:rgba(0,0,0,1.00);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
    box-sizing: border-box;
	color: #fff;
  text-combine-upright: none;
  letter-spacing: 2px;
  }
  /* スクロール時に隠すためのクラス（JSで制御） */
  .header-hidden {
    transform: translateY(-160%); /* 上に隠す */
  }
section{
max-width: 1000px;
margin: 0 auto 40px;
padding: 20px;
}
.sp{
display: block;
}
.pc{
display: none;
}
.top{
position: relative;
overflow-x: hidden; /* fallback */
overflow-x: clip;
width: 100%;
}
h1{
font-size: 8vw;
text-align: center;
letter-spacing: 2px;
}
h2{
font-size: 6vw;
text-align: center;
margin: 40px 0;
}
.imabari{
object-fit:cover;
object-position: right;
margin-left: auto;
border-radius: 0 0 0 80% ;
}
.boy{
position: absolute;
top: 42%;
left: 1%;
margin: 20px;
width: 34%;
}
.tokyo{
position: absolute;
top: 97%;
right: -5%;
width: 40%;
}
.tokyo img{
width: 100%;
border-radius: 56% 44% 49% 51% / 59% 44% 56% 41% ;
position: relative;
z-index: 2;
}
.tokyo::before{
content: "";
position: absolute;
top: 10%;
right: 80%;
width: 65%;
height: 55%;
background-image: url("../img/come-3.png");
background-size:contain;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8)) 
drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}
.tokyo::after{
content: "";
position: absolute;
top: -8%;
right: -5%;
width: 100%;
height: 100%;
background-image: url("../img/bg-1.png");
background-size: cover;
background-position: center;
border-radius: 51% 49% 55% 45% / 48% 57% 43% 52%  ;
z-index: 1;
opacity: 0.8;
}
.osaka{
position: absolute;
top: 80%;
right: 15%;
width: 35%;
}
.osaka img{
width: 100%;
border-radius: 47% 53% 38% 62% / 59% 44% 56% 41% ;
position: relative;
z-index: 2;
}
.osaka::before{
content: "";
position: absolute;
top: 40%;
right: 60%;
width: 70%;
height: 70%;
background-image: url("../img/come-2.png");
background-size:contain;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8)) 
drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}
.osaka::after{
content: "";
position: absolute;
top: 15%;
right: 20%;
width: 90%;
height: 90%;
background-image: url("../img/bg-2.png");
opacity: 0.8;
background-size: cover;
background-position: center;
border-radius: 38% 62% 46% 54% / 48% 57% 43% 52%  ;
z-index: 1;
}
.top-t{
position: absolute;
display: grid;
justify-content: center;
align-items: center;
top: 12%;
right: 1%;
z-index: 10;
}
.top-t p{
text-align: center;
margin-top: 20px;
line-height: 240%;
font-size: 18px;
color:#3387F2;
font-weight: 400;
}
span.w_marker{
background: linear-gradient(rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
display: inline;
padding: 5px 20px;
-webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}


.barysan{
width: 70%;
}
.iyonosuke{
width: 20%;
}
.grid-waku{
position: relative;
margin-top: 150px;
padding: 40px 0 40px;
margin-bottom: 40px;
width: 100%;
}
.hiroshima{
position: absolute;
top: 30%;
left: 5%;
width: 40%;
}
.hiroshima img{
width: 100%;
border-radius: 47% 53% 62% 38% / 37% 61% 39% 63% ;
position: relative;
z-index: 2;
}
.hiroshima::before{
content: "";
position: absolute;
top: -32%;
left: 1%;
width: 80%;
height: 55%;
background-image: url("../img/come-4.png");
background-size:contain;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8)) 
drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}
.hiroshima::after{
content: "";
position: absolute;
top: 8%;
right: -8%;
width: 100%;
height: 100%;
background-image: url("../img/bg-3.png");
background-size: cover;
background-position: center;
border-radius: 51% 49% 55% 45% / 48% 57% 43% 52%  ;
z-index: 1;
opacity: 0.8;
}
.fukuoka{
position: absolute;
top:20%;
right: 5%;
width: 45%;
z-index: 2; /* 上に表示 */
}
.fukuoka img{
width: 100%;
border-radius:43% 57% 40% 60% / 59% 44% 56% 41%  ;
position: relative;
z-index: 2;
}
.fukuoka::before{
content: "";
position: absolute;
top: -25%;
right: -15%;
width: 60%;
height: 60%;
background-image: url("../img/come-1.png");
background-size:contain;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8)) 
drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}
.fukuoka::after{
content: "";
position: absolute;
top: 5%;
right: 10%;
width: 100%;
height: 100%;
background-image: url("../img/bg-4.png");
background-size: cover;
background-position: center;
border-radius: 51% 49% 55% 45% / 48% 57% 43% 52%  ;
z-index: 1;
opacity: 0.8;
}

.grid{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
z-index: 10;
margin-top: 60px;
}
.grid h2{
font-weight: 600;
font-size: 4.6vw;
text-align: center;
margin: 40px 0;
}
.line-btn{
margin: 50px 0;
}
.line-btn img{
width: 50px;
}
.line-btn a{
display: flex;
justify-content: center;
align-items: center;
gap:10px;
flex-wrap:nowrap;
border: 2px solid #06C755;
padding: 10px 20px;
border-radius: 10px;
color: #06C755;
font-weight: 600;
font-size: 18px;
}
.line-btn :hover{
background: #06C755;
color: #fff;
}
.bg-g{
background-color: #06C755;
color: #fff;
padding: 20px 0;
}
.bg-b{
background-color:#99C3EB;
color: #333;
padding: 20px 0;
}
ul.li-3{
margin: 80px 0 40px;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: stretch;
gap:2%;
}
.li-3 li{
width: 90%;
background-color: #fff;
color: #333;
padding: 40px 20px;
margin-bottom: 80px;
position: relative;
border-radius: 10px;
}
.li-3 h3{
margin-top: 10px;
font-size: 28px;
text-align: center;
font-weight: 600;
font-family: "Kiwi Maru", serif;
color: #1C8ACF;
}
.check{
position: absolute;
left: 10px;
top: -60px;
}
/*ギフト*/
.gift-waku{
margin: 0;
padding: 20px 20px 60px;
}
.gift {
display: flex;
flex-direction: column; /* スマホは縦並び */
align-items: stretch;
width: 100%;
margin: 60px auto 40px;
padding: 20px 0;
}
.gift-img  img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2));
}
.gift-t {
width: 90%;          /* 少し狭めて浮かせる */
margin: -10px auto 0; /* 上に50px重ねて中央配置 */
background: #fff;
padding: 30px 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
border-radius: 8px;
z-index: 2;          /* 画像の上に重ねる */
}
.gift-img {
width: 100%;
}
.gift-t h3 {
margin-top: 0;
color: #559ED4;
font-size: 21px;
font-weight: 600;
}
ul.lists{
margin: 20px 0;
padding: 0;
list-style: disc;
margin-left: 10px;
}
ul.lists li{
margin-bottom: 10px;
padding-bottom: 5px;
border-bottom: 1px dotted #ccc;
}
.ss{
font-size: 14px;
}
p.big{
margin: 20px 0 40px;
text-align: center;
font-size: 18px;
}
/*応募条件*/
dl.oubo {
margin: 40px 0;
padding: 0;
}
.row {
display: flex;
align-items: flex-start; /* 垂直中央揃え */
gap: 2%;
margin-bottom: 20px; /* 行間の余白 */
}
.oubo dt {
flex-shrink: 0; /* 円が潰れないように固定 */
width: 60px;
height: 60px;
background-color: #fff;
color: #559ED4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
/* 影をつけるならここ */
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
}
.oubo dd {
margin: 0;
flex-grow: 1; /* 残りの幅をすべて使う */
font-size: 16px;
}
.kikaku{
margin: 20px 0 60px;
}
.btn-w {
margin: 20px 0 40px;
text-align: center;
}
.btn-w a{
display: inline-flex;
justify-content: center;
align-items: center;
flex-wrap:nowrap;
background-color: #fff;
padding: 10px 20px;
border-radius: 10px;
color: #559ED4;
font-weight: 600;
font-size: 18px;
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
}
.btn-w :hover{
background: #559ED4;
color: #fff;
}
.btn-b {
margin: 20px 0 40px;
text-align: center;
}
.btn-b a{
display: inline-flex;
justify-content: center;
align-items: center;
flex-wrap:nowrap;
background-color:#277DCC;
padding: 10px 20px;
border-radius: 10px;
color: #fff;
font-weight: 600;
font-size: 24px;
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
}
.btn-b :hover{
background: #fff;
color: #277DCC;
}
.contact-icon a::before{
margin-right: 5px;
font-family: "Material Symbols Outlined";
content: '\e158';
font-size: 24px;
}
.chart-icon a::before{
margin-right: 5px;
font-family: "Material Symbols Outlined";
content: '\e918';
font-size: 21px;
}
.center{
text-align: left;
}

/*LINE登録*/
ul.otomodachi{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap:2%;
margin: 40px 0;
padding: 0;
}
ul.otomodachi li{
width: calc(96% / 1);
text-align: center;
color: #06C755;
margin-bottom: 20px;
}
ul.otomodachi li img{
width: 50%;
margin: auto;
margin-bottom: 20px;
}
/*プロジェクト*/
.btn-c {
margin: 40px auto;
display: flex;
justify-content: center;
}
.btn-c a{
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
border: 1px solid #333;
border-radius: 50%;
color: #333;
font-weight: 600;
font-size: 16px;
/*filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));*/
}
.btn-c :hover{
background: #333;
color: #fff;
}
/*footer*/
footer{
padding: 40px;
background-color:#E5E5E5;
display: flex;
flex-direction: column;
gap:20px;
justify-content: center;
font-size: 13px;
}
footer h3{
font-size: 16px;
font-weight: 500;
margin-bottom: 5px;
line-height: 150%;
}
footer h3 span{
font-size: 14px;
display: block;
}
ul.akinai{
list-style: disc;
list-style-position: inside;
}
/*waku ul{
list-style-type: disc;
margin-left: 20px;
padding-left: 10px;
margin-bottom: 10px;
}*/
.copy{
text-align: center;
font-size: 14px;
margin: 10px 0;
}
/*概要*/
.imabari_bg{
background-image: url("../img/imabari-2.png");
background-position: center;
background-size: cover;
padding: 50px 0;
background-attachment: fixed;
}
.page{
padding:40px 20px;
margin: 80px auto 40px;
background-color: rgba(255,255,255,0.80);
position: relative;
width: 96%;
}
.page h1{
font-size: 31px;
margin: 30px 0 40px;
font-weight: 600;
}
.page h2{
font-size: 28px;
font-weight: 400;
}
.page h3{
font-size: 26px;
margin: 40px;
text-align: center;
}
.page p{
margin-bottom: 60px;
}
ul.photo{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap:2%;
margin-bottom: 40px;
}
ul.photo li:nth-child(1){
width: 38%;
}
ul.photo li:nth-child(2){
width: 25%;
}
ul.photo li:nth-child(3){
width: 33%;
}
ul.photo li img{
border-radius: 50%;
}

/*qa*/
.imabari_bg2{
background-image: url("../img/imabari-3.png");
background-position: center;
background-size: cover;
padding: 50px 0;
background-attachment: fixed;
}
dl.qa{
display: block;
}
.qa dt{
width: 100%;
font-size: 21px;
margin-bottom: 20px;
padding: 10px;
text-indent: -2em;
padding-left: 2em;
}
.qa dt::before{
content: 'Q.';
font-size: 30px;
margin-right: 10px;
font-weight: 600;
color: #1597FC;
}
.qa dd{
width: 100%;
padding: 20px 40px 60px;
text-indent: -4.2em;
padding-left: 4.2em;
background-color: #ffffff;
margin-bottom: 40px;
margin: 20px 0 40px;
border-radius: 10px;
line-height: 160%;
}
.qa dd::before{
content: 'A.';
font-size: 30px;
margin-right: 10px;
margin-left: 30px;
font-weight: 600;
color:rgba(255,192,18,1.00);
}
.qa dd span {
  display: inline-block;
  padding-left: 7em;
  text-indent: -5em;
  background-color: rgba(255,192,18,1.00);
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 5px;
}
.qa ul {
  margin: 40px 0;
  padding-left: 20px; /* 全体の位置調整。お好みで。 */
}

.qa ul li {
  /* インデント設定をリセット */
  padding-left: 0;
  text-indent: 0;
  
  /* リストのポッチを内側に入れる設定 */
  list-style-position: outside; /* これで2行目以降もポッチの下ではなく文字の下に揃う */
  list-style-type: disc;
  
  margin-bottom: 4px; /* 行間が詰まっているなら少しあける */
}
.waku{
margin: 20px 0;
padding: 20px;
background-color: #F9F9F9;
}
.waku h3{
text-align: left;
font-size: 18px;
margin: 0 0 10px;
padding-left:5em;
text-indent: -5em;
font-weight: 500;
}
.waku p{
text-align: left;
margin: 0 0 5px;
padding-left:5em;
text-indent: -5em;
font-size: 14px;
}
 .waku ul{
list-style-type: disc;
margin-left: 20px;
padding-left: 20px;
margin-bottom: 10px;
margin: 5px;
}
 .waku ul li{
 margin-bottom: 0;
 }
 
.photo_1{
position: absolute;
top: -1%;
left: 5%;
width: 35vw;
max-width: 280px;
border-radius: 50%;
}
.photo_2{
position: absolute;
top: -1.2%;
right: 15%;
width: 30vw;
max-width: 240px;
border-radius: 50%;
}
.photo_3{
position: absolute;
top: 0.5%;
right: 2%;
width: 26vw;
max-width: 200px;
border-radius: 50%;
}
@media screen and (min-width: 769px) {
html, body {
	overflow-y: auto; /* 常に縦スクロールバーの領域を確保する */
}
.header-container {
    position: fixed; /* 画面に対して固定 */
    top: 20px;
    left: 0;     /* 左側の余白 */
    z-index: 1000;
    transition: transform 0.3s ease; /* アニメーションの速度 */
  }
.logo-box {
    width: 300px;
    height: 40px;
    background-color:rgba(0,0,0,1.00);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    padding: 5px 10px;
    box-sizing: border-box;
	color: #fff;
  text-combine-upright: none;
  letter-spacing: 2px;
  }
/*.header-container {
    position: fixed;
    top: 0;
    left: 40px;  
    z-index: 1000;
    transition: transform 0.3s ease; 
  }*/
/*.logo-box {
    width: 50px;
    height: 300px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    box-sizing: border-box;
	writing-mode: vertical-rl;
  text-combine-upright: none;
  letter-spacing: 2px;
  }*/

 /* .header-hidden {
    transform: translateY(-120%);
  }*/
.sp{
display: none;
}
.pc{
display: block;
}
.imabari{
object-fit: cover;
object-position: right;
margin-left: auto;
border-radius: 100% 0% 20% 80% / 0% 100% 0% 100% ;
}
.top-t{
position: absolute;
display: grid;
justify-content: center;
align-items: center;
top: 8%;
right: 10%;
}
.top-t p{
text-align: center;
margin-top: 40px;
line-height: 240%;
font-size: 24px;
color: #3387F2;
font-weight: 400;
}
span.w_marker{
background: linear-gradient(rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
display: inline;
letter-spacing: 5px;
margin-right: -5px;
padding: 5px 20px;
-webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.boy{
position: absolute;
top: 8%;
left: 4%;
margin: 20px;
width: 19%;
}
.tokyo{
position: absolute;
top: 90%;
right: 3%;
width: 26%;
}
.tokyo img{
width: 100%;
border-radius: 56% 44% 49% 51% / 59% 44% 56% 41% ;
position: relative;
z-index: 2;
}
.tokyo::before{
content: "";
position: absolute;
top: -25%;
right: 50%;
width: 55%;
height: 55%;
background-image: url("../img/come-3.png");
background-size:contain;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8)) 
drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}
.tokyo::after{
content: "";
position: absolute;
top: -8%;
right: -5%;
width: 100%;
height: 100%;
background-image: url("../img/bg-1.png");
background-size: cover;
background-position: center;
border-radius: 51% 49% 55% 45% / 48% 57% 43% 52%  ;
z-index: 1;
opacity: 0.8;
}
.osaka{
position: absolute;
top: 86%;
right: 30%;
width: 20%;
}
.osaka img{
width: 100%;
border-radius: 47% 53% 38% 62% / 59% 44% 56% 41% ;
position: relative;
z-index: 2;
}
.osaka::before{
content: "";
position: absolute;
top: -25%;
right: 60%;
width: 70%;
height: 70%;
background-image: url("../img/come-2.png");
background-size:contain;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8)) 
drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}
.osaka::after{
content: "";
position: absolute;
top: 15%;
right: 20%;
width: 90%;
height: 90%;
background-image: url("../img/bg-2.png");
opacity: 0.8;
background-size: cover;
background-position: center;
border-radius: 38% 62% 46% 54% / 48% 57% 43% 52%  ;
z-index: 1;
}
.grid-waku{
position: relative;
margin-top: 120px;
}
.hiroshima{
position: absolute;
top: 150%;
left: 2%;
width: 24%;
}
.hiroshima img{
width: 100%;
border-radius: 47% 53% 62% 38% / 37% 61% 39% 63% ;
position: relative;
z-index: 2;
}
.hiroshima::before{
content: "";
position: absolute;
top: -32%;
right: 40%;
width: 55%;
height: 55%;
background-image: url("../img/come-4.png");
background-size:contain;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8)) 
drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}
.hiroshima::after{
content: "";
position: absolute;
top: 8%;
right: -8%;
width: 100%;
height: 100%;
background-image: url("../img/bg-3.png");
background-size: cover;
background-position: center;
border-radius: 51% 49% 55% 45% / 48% 57% 43% 52%  ;
z-index: 1;
opacity: 0.8;
}
.fukuoka{
position: absolute;
top: 180%;
right: 5%;
width: 23%;
z-index: 2; /* 上に表示 */
}
.fukuoka img{
width: 100%;
border-radius:43% 57% 40% 60% / 59% 44% 56% 41%  ;
position: relative;
z-index: 2;
}
.fukuoka::before{
content: "";
position: absolute;
top: -25%;
right: -15%;
width: 60%;
height: 60%;
background-image: url("../img/come-1.png");
background-size:contain;
background-position: center;
background-repeat: no-repeat;
z-index: 3;
filter: drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8)) 
drop-shadow(5px 5px 10px rgba(255, 255, 255, 0.8));
}
.fukuoka::after{
content: "";
position: absolute;
top: 5%;
right: 10%;
width: 100%;
height: 100%;
background-image: url("../img/bg-4.png");
background-size: cover;
background-position: center;
border-radius: 51% 49% 55% 45% / 48% 57% 43% 52%  ;
z-index: 1;
opacity: 0.8;
}
h1{
font-size: 5vw;
text-align: center;
line-height: 100%;
}
h2{
font-size: 2.8vw;
text-align: center;
margin: 40px 0;
}

.grid{
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
flex-wrap: wrap;
z-index: 10;
margin-top: 0px;

}
.grid h2{
font-weight: 600;
font-size: 2.4vw;
text-align: center;
margin: 40px 0;
z-index: 10;
}
.barysan{
width: 40%;
}
.line-btn a{
display: flex;
justify-content: center;
align-items: center;
gap:10px;
flex-wrap:nowrap;
border: 2px solid #06C755;
padding: 10px 20px;
border-radius: 10px;
color: #06C755;
font-weight: 600;
font-size: 21px;
}
ul.otomodachi li{
width: calc(90% / 2);
}
.bg-g{
background-color: #06C755;
color: #fff;
padding: 20px 40px;
}
.li-3 li{
width: 31%;
background-color: #fff;
color: #333;
padding: 40px 20px;
margin-bottom: 40px;
}
.li-3 h3{
margin-top: 10px;
font-size: 30px;
}
.gift {
flex-direction: row; /* 横並びに戻す */
align-items: center; /* 垂直中央揃え */
margin: 100px auto 40px;
}
.gift-img {
flex: 0 0 60%; /* 幅を50%に固定 */
}
.gift-t  {
flex: 0 0 50%;     /* テキストの幅を少し広めに持つ */
background: rgba(255,255,255,0.9);
padding: 60px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* ボックス自体の影 */
border-radius: 8px;
/* 重ねるための重要設定 */
margin-left: -10%; /* 左側に10%分食い込ませる */
z-index: 2;        /* テキストを画像の上に重ねる */
}
.row {
display: flex;
align-items: center; /* 垂直中央揃え */
gap: 2%;
margin-bottom: 20px; /* 行間の余白 */
}
.oubo dt {
flex-shrink: 0; /* 円が潰れないように固定 */
width: 80px;
height: 80px;
background-color: #fff;
color: #559ED4;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
/* 影をつけるならここ */
filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.2));
}
.oubo dd {
margin: 0;
flex-grow: 1; /* 残りの幅をすべて使う */
font-size: 18px;
}
.center{
text-align: center;
}
.btn-c {
margin: 80px auto 40px;
display: flex;
justify-content: center;
}

p.big{
margin: 20px 0 40px;
text-align: center;
font-size: 24px;
}
/*footer*/
footer{
padding: 40px;
background-color:#E5E5E5;
display: flex;
flex-direction: row;
gap:20px;
justify-content: space-around;
font-size: 14px;
}
/*概要*/
.page{
padding: 60px;
margin: 50px auto;
background-color: rgba(255,255,255,0.80);
width: 98%;
}
.page h1{
font-size: 36px;
margin: 40px 0 60px;
font-weight: 600;
}
.page h2{
font-size: 32px;
font-weight: 400;
}
.page h3{
font-size: 26px;
margin: 40px;
text-align: center;
}
/*qa*/
.qa dt{
width: 100%;
font-size: 24px;
margin-bottom: 20px;
padding: 10px;
text-indent: -5em;
padding-left: 5em;
}
.qa dt::before{
content: 'Q.';
font-size: 40px;
margin-right: 10px;
font-weight: 600;
color: #1597FC;
}
.qa dd{
width: 100%;
padding: 20px 40px 60px;
text-indent: -5em;
padding-left: 5em;
background-color: #ffffff;
margin-bottom: 40px;
margin: 20px 0 40px;
border-radius: 10px;
line-height: 160%;
}
.qa dd::before{
content: 'A.';
font-size: 40px;
margin-right: 10px;
margin-left: 30px;
font-weight: 600;
color:rgba(255,192,18,1.00);
}
.qa dd span {
  display: inline-block;
  padding-left: 7em;
  text-indent: -5em;
  background-color: rgba(255,192,18,1.00);
  box-sizing: border-box;
  margin-bottom: 10px;
  border-radius: 5px;
}
.waku{
margin: 20px 0;
padding: 20px;
background-color: #F9F9F9;
}
.waku h3{
text-align: left;
font-size: 18px;
margin: 0 0 10px;
padding-left:5em;
text-indent: -5em;
font-weight: 500;
}
.waku p{
text-align: left;
margin: 0 0 5px;
padding-left:5em;
text-indent: -5em;
font-size: 14px;
}
.photo_1{
position: absolute;
top: -2%;
left: 10%;
width: 18vw;
max-width: 280px;
border-radius: 50%;
}
.photo_2{
position: absolute;
top: -2%;
right: 15%;
width: 16vw;
max-width: 240px;
border-radius: 50%;
}
.photo_3{
position: absolute;
top: 2%;
right: 3%;
width: 12vw;
max-width: 200px;
border-radius: 50%;
}
}