@charset "UTF-8";

/*共通*/
p {
line-height: 1.6;
word-wrap: break-word;
font-family: 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', sans-serif , 'ヒラギノ角ゴ Pro W3';
text-align: center;
}
.contents{
margin: 0 auto;
padding: 0;
overflow: hidden;
color: #333;
background: #fff;
}
.contents-box{
max-width: 750px;
margin: 0 auto;
box-sizing:border-box;
padding: 0 3%;
}
a:link, a:visited, a:hover, a:active {
color: #000;
}
a:hover {
opacity: 0.7;
text-decoration: none;
}
.pc_ds{
display: block;
}
.sp_ds{
display: none;
}
img , video{
max-width: 100%;
width: 100%;
}
.photo{
margin-top: 3%; 
}

/*テキスト*/
.comment {
font-size: 26px;
font-weight: bold;
}
b{
font-weight: bold;
}
.fo_b{
font-size: 140%;
}
.fo_b2{
font-size: 160%;
}
.tyuu{
font-size: 12px;
color: #c1c1c1;
text-align: right;
}
.y_lin{
background: rgba(0, 0, 0, 0)linear-gradient(transparent 70%, #fbf24b 0%)repeat scroll 0 0;
}
.co_r{
color: #f9234b;
}
.co_e{
color: #fbf24b;
}
.co_p{
color: #fe027b;
}
.co_b{
color: #0042db;
}
.co_o{
color: #ff6600;
}

.ta_r{
text-align: right;
}
.ta_c{
text-align: center;
}

/*margin*/
.mt1{
margin-top: 1%; 
}
.mt2{
margin-top: 2%; 
}
.mt3{
margin-top: 3%; 
}
.mt4{
margin-top: 4%; 
}
.mb1{
margin-bottom: 1%; 
}
.mb2{
margin-bottom: 2%; 
}
.mb3{
margin-bottom: 3%; 
}
.mb4{
margin-bottom: 4%; 
}

/*ポジション*/
.po_r{
position: relative;
}
.po_a{
position: absolute;
}

/*ポジション　上下左右中央*/
.po_ce{
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}
/*ポジション　左右中央*/
.po_lr_ce{
top: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
}

/*タイトル*/
h2{
    margin-top: 7%;
    padding: 2% 3%;
    /* border-bottom: 3px solid #f9234b; */
    border-left: 10px solid #f9234b;
    font-weight: bold;
    font-size: 23px;
    background-color: #fffdde;
}
h3{
    margin-top: 7%;
    padding: 2% 3%;
    font-weight: bold;
    font-size: 23px;
    background-color: #000;
    color: #fff;
}


/*----------sp------------*/
@media (max-width: 767px) { 
/*共通*/
.contents{
width: 100%;
}
.sp_ds{
display: block;
}
.pc_ds{
display: none;
}
.pc_ds2{
display: none;
}
.contents_wrapper {
width: 100%;
}

/*テキスト*/
.tyuu{
font-size: 10px;
}
h2{
    margin-top: 15%;
    padding: 4% 3%;
    border-left: 7px solid #f9234b;
    font-size: 20px;
}
}

/*　ページ内　*/
/* ---------- 会話風 ---------- */
.talk_frame{
padding: 3%;
margin-top: 3%;
background-color: #f3f9ff;
}
/* 全体 */
.sb-box {
position: relative;
overflow: hidden;
}
/* アイコン画像 */
.icon-img {
position: absolute;
overflow: hidden;
top: 0; /* 画像の位置を上から0に */
width: 80px; /* 画像の幅 */
height: 80px; /* 画像の高さ */
}
.icon-img img{
width: 75px;
height: 75px;
}
/* アイコン画像（左） */
.icon-img-left {
left: 0; /* 画像の位置を左から0に */
}
/* アイコン画像（右） */
.icon-img-right {
right: 0; /* 画像の位置を右から0に */
}
/* アイコン画像 */
.icon-img img {
border-radius: 50%; /* 画像を丸く表示する */
border: 2px solid #eee; /* 画像の縁取りの太さとカラー */
}
/* 吹き出し */
.sb-side {
position: relative;
float: left;
margin: 0 105px 40px 105px; /* 吹き出しの上下左右の余白 */
}
.sb-side-right {
float: right;
}
/* 吹き出し内のテキスト */
.sb-txt {
position: relative;
border: 2px solid #eee; /* 吹き出しの縁取りの太さとカラー */
border-radius: 6px; /* 吹き出しを角丸に */
background: #fff; /* 吹き出しの背景色 */
color: #333; /* 吹き出し内のテキストのカラー */
font-size: 15px; /* 吹き出し内のフォントサイズ */
line-height: 1.7; /* 吹き出し内のテキストが2行以上になった時の行間 */
padding: 18px; /* 吹き出し内の上下左右の余白 */
}
.sb-txt > p:last-of-type {
padding-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにpadding-bottomをつけない */
margin-bottom: 0; /* 吹き出し内のテキストを改行した場合、最後のpタグにmargin-bottomをつけない */
}
/* 吹き出しの三角 */
.sb-txt:before {
content: "";
position: absolute;
border-style: solid;
top: 16px; /* 吹き出し内の三角の位置 */
z-index: 3;
}
.sb-txt:after {
content: "";
position: absolute;
border-style: solid;
top: 15px; /* beforeより-1px */
z-index: 2; /* beforeより-1 */
}
/* 吹き出しの三角（左） */
.sb-txt-left:before {
left: -7px;
border-width: 7px 10px 7px 0;
border-color: transparent #fff transparent transparent; /* 背景色と同じカラーに */
}
.sb-txt-left:after {
left: -10px; /* beforeより-3px */
border-width: 8px 10px 8px 0; /* beforeより上下+1px */
border-color: transparent #eee transparent transparent; /* 縁取りと同じカラーに */
}
/* 吹き出しの三角（右） */
.sb-txt-right:before {
right: -7px;
border-width: 7px 0 7px 10px;
border-color: transparent transparent transparent #fff; /* 背景色と同じカラーに */
}
.sb-txt-right:after {
right: -10px; /* beforeより-3px */
border-width: 8px 0 8px 10px; /* beforeより上下+1px */
border-color: transparent transparent transparent #eee; /* 縁取りと同じカラーに */
}

/* 767px（iPad）以下 */
@media (max-width: 767px) {
/* アイコン画像 */
.icon-img {
width: 60px; /* 画像の幅を-20px */
height: 60px; /* 画像の高さを-20px */
}
.icon-img img{
width: 55px;
height: 55px;
}
/* 吹き出し（左） */
.sb-side-left {
margin: 0 0 30px 78px; /* 吹き出し（左）の上下左右の余白を狭く */
}
/* 吹き出し（右） */
.sb-side-right {
margin: 0 78px 30px 0; /* 吹き出し（右）の上下左右の余白を狭く */
}
/* 吹き出し内のテキスト */
.sb-txt {
padding: 12px; /* 吹き出し内の上下左右の余白を-6px */
}
}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*アンケート*/
/*ラジオボタン*/
.ank{
    padding: 1%;
    margin: 3% auto 0;
    max-width: 100%;
}
.radio-003 {
    border: none;
}
.radio-003 label {
    display: flex;
    align-items: center;
    gap: 0 .5em;
    position: relative;
    max-width: 100%;
    margin-bottom: .4em;
    padding: 2%;
    border: 1px solid #bd0000;
    border-radius: 25px;
    background-color: #bd000026;
    cursor: pointer;
    font-weight: bold;
}
.radio-003 label:has(:checked) {
    background-color: #bd0000;
    color: #fff;
}
.radio-003 label::before,
.radio-003 label:has(:checked)::after {
    border-radius: 50%;
    content: '';
}
.radio-003 label::before {
    width: 14px;
    height: 14px;
    background-color: #fff;
}
.radio-003 label:has(:checked)::after {
    position: absolute;
    top: 50%;
    left: calc(7px + 2%);
    transform: translate(-50%, -50%);
    width: 7px;
    height: 7px;
    background-color: #bd0000;
}
.radio-003 input {
    display: none;
}

/*アニメーション　上下*/
.animate{
-webkit-animation-timing-function: ease-in;
    -moz-animation-timing-function: ease-in;
    -o-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.bouncing{
    -moz-animation-duration: 1.5s;
    -o-animation-duration: 1.5s;
    -webkit-animation-duration: 1.5s;
    animation-duration: 1.5s;
    -moz-animation-name: bouncing;
    -o-animation-name: bouncing;
    -webkit-animation-name: bouncing;
    animation-name: bouncing;
}
@-moz-keyframes bouncing{
    20%, 53%, 80%, 0%, 100% {-moz-animation-timing-function: cubic-bezier(.215,.61,.355,1);transform: translate3d(0,0,0);}
    40%, 43% {-moz-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-30px,0);}
    70% {-moz-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-15px,0);}
    90% {transform: translate3d(0,-4px,0);}
}
@-o-keyframes bouncing{
    20%, 53%, 80%, 0%, 100% {-o-animation-timing-function: cubic-bezier(.215,.61,.355,1);transform: translate3d(0,0,0);}
    40%, 43% {-o-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-30px,0);}
    70% {-o-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-15px,0);}
    90% {transform: translate3d(0,-4px,0);}
}
@-webkit-keyframes bouncing{
    20%, 53%, 80%, 0%, 100% {-webkit-animation-timing-function: cubic-bezier(.215,.61,.355,1);transform: translate3d(0,0,0);}
    40%, 43% {-webkit-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-30px,0);}
    70% {-webkit-animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-15px,0);}
    90% {transform: translate3d(0,-4px,0);}
}
@keyframes bouncing{
    20%, 53%, 80%, 0%, 100% {animation-timing-function: cubic-bezier(.215,.61,.355,1);transform: translate3d(0,0,0);}
    40%, 43% {animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-30px,0);}
    70% {animation-timing-function: cubic-bezier(.755,.050,.855,.060);transform: translate3d(0,-15px,0);}
    90% {transform: translate3d(0,-4px,0);}
}

footer{
    padding: 5% 3%;
    background-color: #333;
    margin-top: 3%;
}
footer p a:link{
    color: #fff;
text-decoration: none;
}