@charset "utf-8";



/* index.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
html { 

/* 背景画像の設定 */
background-image: -webkit-image-set(
url("../images/kicbg300.webp") type("image/webp"),
url("../images/kicbg300.png") type("image/png")
);
background-image: image-set(
url("../images/kicbg300.webp") type("image/webp"),
url("../images/kicbg300.png") type("image/png")
);

background-repeat: repeat; 

}

body { }

body {
width: 100%;

/* 背景画像の設定 */
background-image: -webkit-image-set(
url("../images/aws26bgpc.webp") type("image/webp"),
url("../images/aws26bgpc.png") type("image/png")
);
background-image: image-set(
url("../images/aws26bgpc.webp") type("image/webp"),
url("../images/aws26bgpc.png") type("image/png")
);

/* サイズをPXか%で指定 */
background-size: 1235px;

/* 繰り返し防止と中央配置（任意） */
background-repeat: repeat-x;
background-position: center top;
}


.q26tbglgwk { position: absolute; right: 0; left: 0; margin: 0 auto; width: 800px; height: 185px; }
.q26tbglgbox { position: absolute; left: -100px; width: 221px; }
.q26tbglgbox img { width: 100%; }


.qs26head { position: relative; margin: 0 auto; width: 95%; height: 94px; }

.qs26hlogo {position: absolute; top: 0; right: 0; padding: 0.7em 0; width: 155px; }
.qs26hlogo img { width: 100%; }

.qs26title { position: relative; margin: 0 auto; width: 620px; }
.qs26title img { width: 100%; }

.qs26lead { position: relative; margin: 3em auto 0 auto; width: 620px; }
.qs26lead p { text-align: center; font-size: 1.1rem; line-height: 1.9em; color: #00a06b;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 500;
}

.highlighter {
background: linear-gradient(transparent 3%, #faee00 0%);
}



.togiboxldbtn { position: relative; margin: 3em auto 0 auto; width: 620px; text-align: center; }

/* 親要素となるaタグに基準点を設定 */
.togiboxldbtn a {
position: relative; /* 疑似要素の基準にする */
display: inline-block;
width: 440px;
padding: 0.7em 1em 0.7em 1em; /* 右側に矢印用の余白（2.5em）を確保 */
box-sizing: border-box; /* パディングを含めたサイズ計算にする */
/* 以下、既存のスタイル */
text-align: center;
color: #fff;
text-decoration: none;
background-color: #00a06b;
font-size: 1.5rem;
border-bottom: 8px solid #80cfb5;
border-radius: 12px;
transition: all 0.3s ease;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 700;
}

/* 疑似要素で矢印を配置 */
.togiboxldbtn a::after {
content: "";
position: absolute;
top: 50%;         /* 上から50%の位置 */
right: 15px;      /* 右から15pxの位置 */
transform: translateY(-50%); /* 自身の高さの半分戻して完全な中央に */

/* 矢印画像の設定 */
width: 15px;      /* 画像の横幅（適宜調整） */
height: 21px;     /* 画像の縦幅（適宜調整） */
background-image: url("../images/aws26btnarw.png"); /* 矢印画像のパス */
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

/* ホバー時に矢印が消えないよう、共通のスタイルを維持 */
.togiboxldbtn a:hover,
.togiboxldbtn a:active {
/* 既存のホバー演出 */
border-bottom: 1px solid #80cfb5;
transform: translate3d(0, 7px, 0);
margin-bottom: 7px;
}



.qs26wk1 { position:relative; margin: 3em auto 0 auto; width: 660px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx1 {
container-type: inline-size; /* これが重要！ */
width: 43%;          /* 可変幅（%指定やflexなど） */
min-width: 280px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto;
padding: 55px 30px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}

/* 2. 中の要素に cqi 単位を使う */
/* 10cqi = コンテナ幅の 10% */
.qs26wk1bx1 h2 { text-align: center;
font-size: 24px;
font-size: 12cqi; 
color: #00a06b;
padding-bottom: 0.4em;
border-bottom: 1px solid #333;
margin-bottom: 0.5em;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
line-height: 1.4;
}

.qs26wk1bx1 p { text-align: center;
font-size: 16px;
font-size: 7cqi;
line-height: 1.5;
}

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx2 {
container-type: inline-size; /* これが重要！ */
width: 45%;          /* 可変幅（%指定やflexなど） */
min-width: 280px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto;
padding: 45px 30px 0 30px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}

/* 2. 中の要素に cqi 単位を使う */
/* 10cqi = コンテナ幅の 10% */
.qs26wk1bx2 h2 { text-align: center;
font-size: 24px;
font-size: 9.4cqi; 
color: #00a06b;
padding-bottom: 0.4em;
border-bottom: 1px solid #333;
margin-bottom: 0.5em;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
line-height: 1.4;
}

.qs26wk1bx2 p { text-align: center;
font-size: 16px;
font-size: 7cqi;
line-height: 1.5;
}



.qs26snswk1 { position: relative; margin: 4em auto 0.5em auto; width: 620px; }

.qs26snsmds { margin: 0 auto; width: 90%; text-align: center; }

.title02 {
display: inline-block;
position: relative;
padding: 5px;
padding-inline: 35px;
color: #00a06b;
font-size: 1.1rem;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 700;
}
.title02::before,.title02::after {
content: "";
height: 100%;
width: 2px;
background-color: #00a06b;
position: absolute;
top: 0;
}
.title02::before {
left: 0;
transform: rotate(-30deg);
}
.title02::after {
right: 0;
transform: rotate(30deg);
}



.qs26wk2 { position:relative; margin: 1.5em auto 0 auto; width: 220px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.qs26wk2bx { width: 80px; }
.qs26wk2bx img { width: 100%; }



/* 画像のスタイル */
.copy-trigger { position: relative; 
cursor: pointer;
opacity:1;
filter:alpha(opacity=100);
-ms-filter:"alpha(opacity=100)";
zoom:1;
transition: all 0.3s ease;
}
.copy-trigger:hover { opacity: 0.8;
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background:none!important;
}



/* 背景を暗くするオーバーレイ (f000 = 黒、透過80%) */
#copy-overlay {
display: none; /* 初期は非表示 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* #000の透過80% */
z-index: 999;
}

/* 中央の通知枠 */
#copy-notification {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
color: #333;
padding: 40px 60px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
text-align: center;
min-width: 250px;
line-height: 1.4;
pointer-events: auto; /* 枠内はクリックを有効に */
}

/* 右上の×ボタン */
#close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #999;
font-family: sans-serif;
line-height: 1;
}
#close-btn:hover {
color: #000;
}



.qs26wk3 { position:relative; margin: 2.5em auto 0 auto; width: 780px; }

.qs26wk3bx { position:relative; margin: 0.5em auto 0 auto; width: 100%; }

.qs26wk3bxlef { position: absolute; padding-top: 0.4em; width: 35px; text-align: left; }
.qs26wk3bxlef img { width: 100%; }

.qs26wk3bxrig { position: relative; margin-left: 50px;  width: calc(100% - 50px); }
.qs26wk3bxrig p { font-size: 1rem; line-height: 1.6em; }



.qs26ftr { position:relative; margin: 3em auto 0 auto; width: 800px; }

.qs26ftrbx1 { position: relative; margin: 0 auto; width: 150px; }
.qs26ftrbx1 img { width: 100%; }

.qs26ftrbx2 { position: relative; margin: 1em auto; width: 100%; }
.qs26ftrbx2 p { font-size: 0.8rem; line-height: 1.6em; text-align: center; color: #19a979; }


















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



/* index.html
------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
html { 

/* 背景画像の設定 */
background-image: -webkit-image-set(
url("../images/kicbg300.webp") type("image/webp"),
url("../images/kicbg300.png") type("image/png")
);
background-image: image-set(
url("../images/kicbg300.webp") type("image/webp"),
url("../images/kicbg300.png") type("image/png")
);

background-repeat: repeat; 

}

body { }

body {
width: 100%;

/* 背景画像の設定 */
background-image: -webkit-image-set(
url("../images/aws26bgsp.webp") type("image/webp"),
url("../images/aws26bgsp.png") type("image/png")
);
background-image: image-set(
url("../images/aws26bgsp.webp") type("image/webp"),
url("../images/aws26bgsp.png") type("image/png")
);

/* サイズをPXか%で指定 */
background-size: 100%;

/* 繰り返し防止と中央配置（任意） */
background-repeat: no-repeat;
background-position: center top;
}


.q26tbglgwk { display: none;position: absolute; right: 0; left: 0; margin: 0 auto; width: 800px; height: 185px; }
.q26tbglgbox { position: absolute; left: -100px; width: 221px; }
.q26tbglgbox img { width: 100%; }


.qs26head { position: relative; margin: 0 auto; width: 95%; height: 94px; }

.qs26hlogo {position: absolute; top: 0; right: 0; padding: 0.7em 0; width: 40%; max-width: 155px; }
.qs26hlogo img { width: 100%; }

.qs26title { position: relative; margin: 0 auto; width: 70%; max-width: 460px; }
.qs26title img { width: 100%; }

.qs26lead { position: relative; margin: 2em auto 0 auto; width: 90%; }
.qs26lead p { text-align: center; font-size: 1rem; line-height: 1.7em; color: #00a06b;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 500;
}

.highlighter {
background: linear-gradient(transparent 3%, #faee00 0%);
}



.togiboxldbtn { position: relative; margin: 2em auto 0 auto; width: 80%; max-width: 400px; text-align: center; }

/* 親要素となるaタグに基準点を設定 */
.togiboxldbtn a {
position: relative; /* 疑似要素の基準にする */
display: inline-block;
width: 100%;
padding: 0.7em 2.5em 0.7em 2.5em; /* 右側に矢印用の余白（2.5em）を確保 */
box-sizing: border-box; /* パディングを含めたサイズ計算にする */
/* 以下、既存のスタイル */
text-align: center;
color: #fff;
text-decoration: none;
background-color: #00a06b;
font-size: 1.2rem;
border-bottom: 8px solid #80cfb5;
border-radius: 12px;
transition: all 0.3s ease;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 700;
}

/* 疑似要素で矢印を配置 */
.togiboxldbtn a::after {
content: "";
position: absolute;
top: 50%;         /* 上から50%の位置 */
right: 15px;      /* 右から15pxの位置 */
transform: translateY(-50%); /* 自身の高さの半分戻して完全な中央に */

/* 矢印画像の設定 */
width: 10px;      /* 画像の横幅（適宜調整） */
height: 14px;     /* 画像の縦幅（適宜調整） */
background-image: url("../images/aws26btnarw.png"); /* 矢印画像のパス */
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}

/* ホバー時に矢印が消えないよう、共通のスタイルを維持 */
.togiboxldbtn a:hover,
.togiboxldbtn a:active {
/* 既存のホバー演出 */
border-bottom: 1px solid #80cfb5;
transform: translate3d(0, 7px, 0);
margin-bottom: 7px;
}



.qs26wk1 { position:relative; margin: 3em auto 0 auto; width: 80%; text-align: center; 
display: block;
}

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx1 {
container-type: inline-size; /* これが重要！ */
width: 60%;          /* 可変幅（%指定やflexなど） */
min-width: 290px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto 1.5em auto;
padding: 58px 30px 0 30px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}


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

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx1 {
container-type: inline-size; /* これが重要！ */
width: 60%;          /* 可変幅（%指定やflexなど） */
min-width: 280px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto 1.5em auto;
padding: 50px 25px 0 25px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}

}



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

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx1 {
container-type: inline-size; /* これが重要！ */
width: 60%;          /* 可変幅（%指定やflexなど） */
min-width: 280px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto 1.5em auto;
padding: 50px 25px 0 25px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}

}



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

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx1 {
container-type: inline-size; /* これが重要！ */
width: 60%;          /* 可変幅（%指定やflexなど） */
min-width: 240px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto 1.5em auto;
padding: 50px 25px 0 25px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}

}


/* 2. 中の要素に cqi 単位を使う */
/* 10cqi = コンテナ幅の 10% */
.qs26wk1bx1 h2 { text-align: center;
font-size: 24px;
font-size: 12cqi; 
color: #00a06b;
padding-bottom: 0.4em;
border-bottom: 1px solid #333;
margin-bottom: 0.5em;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
line-height: 1.4;
}

.qs26wk1bx1 p { text-align: center;
font-size: 16px;
font-size: 7cqi;
line-height: 1.5;
}

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx2 {
container-type: inline-size; /* これが重要！ */
width: 60%;          /* 可変幅（%指定やflexなど） */
min-width: 280px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto 1.5em auto;
padding: 55px 30px 0 30px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}



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

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx2 {
container-type: inline-size; /* これが重要！ */
width: 60%;          /* 可変幅（%指定やflexなど） */
min-width: 280px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto 1.5em auto;
padding: 50px 30px 0 30px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}

}



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

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx2 {
container-type: inline-size; /* これが重要！ */
width: 60%;          /* 可変幅（%指定やflexなど） */
min-width: 280px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto 1.5em auto;
padding: 45px 30px 0 30px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}

}



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

/* 1. 親要素を「コンテナ」として定義する */
.qs26wk1bx2 {
container-type: inline-size; /* これが重要！ */
width: 60%;          /* 可変幅（%指定やflexなど） */
min-width: 240px;
aspect-ratio: 1 / 1;  /* 縦横比を1:1に固定 */
margin: 0 auto 1.5em auto;
padding: 45px 30px 0 30px;
background-color: #fff;
border-radius: 50%;
overflow: auto;
}

}


/* 2. 中の要素に cqi 単位を使う */
/* 10cqi = コンテナ幅の 10% */
.qs26wk1bx2 h2 { text-align: center;
font-size: 24px;
font-size: 9.4cqi; 
color: #00a06b;
padding-bottom: 0.4em;
border-bottom: 1px solid #333;
margin-bottom: 0.5em;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 900;
line-height: 1.4;
}

.qs26wk1bx2 p { text-align: center;
font-size: 16px;
font-size: 7cqi;
line-height: 1.5;
}



.qs26snswk1 { position: relative; margin: 2em auto 0.5em auto; width: 80%; }

.qs26snsmds { margin: 0 auto; width: 90%; text-align: center; }

.title02 { text-align: center;
display: inline-block;
position: relative;
padding: 5px;
padding-inline: 25px;
color: #00a06b;
font-size: 1.1rem;
font-family: "M PLUS Rounded 1c", sans-serif;
font-weight: 700;
}
.title02::before,.title02::after {
content: "";
height: 100%;
width: 2px;
background-color: #00a06b;
position: absolute;
top: 0;
}
.title02::before {
left: 0;
transform: rotate(-30deg);
}
.title02::after {
right: 0;
transform: rotate(30deg);
}



.qs26wk2 { position:relative; margin: 1em auto 0 auto; width: 220px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

.qs26wk2bx { width: 80px; }
.qs26wk2bx img { width: 100%; }



/* 画像のスタイル */
.copy-trigger { position: relative; 
cursor: pointer;
opacity:1;
filter:alpha(opacity=100);
-ms-filter:"alpha(opacity=100)";
zoom:1;
transition: all 0.3s ease;
}
.copy-trigger:hover { opacity: 0.8;
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background:none!important;
}



/* 背景を暗くするオーバーレイ (f000 = 黒、透過80%) */
#copy-overlay {
display: none; /* 初期は非表示 */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8); /* #000の透過80% */
z-index: 999;
}

/* 中央の通知枠 */
#copy-notification {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
color: #333;
padding: 60px 10px 40px 10px;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
text-align: center;
min-width: 80%;
line-height: 1.4;
pointer-events: auto; /* 枠内はクリックを有効に */
}

/* 右上の×ボタン */
#close-btn {
position: absolute;
top: 10px;
right: 15px;
font-size: 24px;
cursor: pointer;
color: #999;
font-family: sans-serif;
line-height: 1;
}
#close-btn:hover {
color: #000;
}



.qs26wk3 { position:relative; margin: 2.5em auto 0 auto; width: 90%; }

.qs26wk3bx { position:relative; margin: 0.5em auto 0 auto; width: 100%; }

.qs26wk3bxlef { position: absolute; padding-top: 0.2em; width: 30px; text-align: left; }
.qs26wk3bxlef img { width: 100%; }

.qs26wk3bxrig { position: relative; margin-left: 40px;  width: calc(100% - 40px); }
.qs26wk3bxrig p { font-size: 0.9rem; line-height: 1.4em; }



.qs26ftr { position:relative; margin: 3em auto 0 auto; width: 90%; }

.qs26ftrbx1 { position: relative; margin: 0 auto; width: 150px; }
.qs26ftrbx1 img { width: 100%; }

.qs26ftrbx2 { position: relative; margin: 1em auto; width: 100%; }
.qs26ftrbx2 p { font-size: 0.8rem; line-height: 1.4em; text-align: center; color: #19a979; }






}