@charset "UTF-8";
/* CSS Document */
body{margin: 0;padding: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 400;
  font-style: normal;}
iframe{width: 100%;}
header img{width: 100%;}
h1{margin: 0;}
h2{font-size: 2rem;}
h3{margin-bottom: 0;}

.s-logo{display: flex;justify-content: center;align-items: center;}

.box,.box01,.box02,.box03,.box04,.box05{padding: 2em 10px;}
.box01{background-color: #f2e237;}
.box02{background-color: #fafafaff;}
.box03{background-color: #123858;}
.box04{background-color: #fefff0;}
.box05{background-color: #00158B;}
section{max-width: 1000px;margin:auto;word-break: auto-phrase;}

.flex01{display: flex;justify-content: space-around;}
.flex02,.flex03,.flex04{display: flex;justify-content: space-between;gap:10px;margin-bottom: 2em;}

.box03 h2,.box05 h2,.box05 p{color: #FFFFFF}
.flex03{position:relative;border:5px solid #1989b7;border-radius:20px;background-color: #FFFFFF}
.flex03 .phot img{border-radius: 20px;max-width: 240px;}
.flex03 .text{padding:1.5em 1em;}
.flex03 .text .name{position:absolute;top: -18px;left: -5px;padding: 10px 25px;background-color:#1989b7;border-radius:4px;color:#fff;line-height: 1em;font-size: 1.3rem;}


.flex01 .text p{margin: 0; padding: 0;}

.flex04{text-align: center;border: 5px solid #2aa0d4;
    border-radius: 20px;
    background-color: #ffffff;max-width: 850px;margin:0 auto 3em;}
.flex04 p{font-size: 0.8rem;width: 50%;}

footer{text-align: center;padding: 10px;font-size: 0.8rem;}

/* ボタン---------------------------------------------- */
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.btn,
a.btn,
button.btn {
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}
a.btn--yellow {
  color: #000;
  background-color: #fff100;
  border-bottom: 5px solid #ccc100;
	margin-top: 1em;
}

a.btn--yellow:hover {
  margin-top: 3px;
  color: #000;
  background: #fff20a;
  border-bottom: 2px solid #ccc100;
}


/* アンケート---------------------------------------------- */
.btn02 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    border: 3px solid #e60013;
    cursor: pointer;
    color: #e60013;
    fill: #e60013;
    font-size: 1rem;
	background-color: #fff;
	width: fit-content;
	margin: auto;
}

.btn02 svg {
    width: 1.5rem;
    height: 1.5rem;
    transition: all .5s;
}

.btn02:hover svg,
.btn02 svg:hover {
    animation: shakeIcon 0.2s linear 2;
}

.btn02:active svg,
.btn02 svg:active {
    transform: scale(1.2);
}

@keyframes shakeIcon {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(2px);
    }

    50% {
        transform: translateX(0);
    }

    75% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }
}


/* Q&A---------------------------------------------- */
.qa-1 {
    margin-bottom: 7px;
    border: 3px solid #000000;
    border-radius: 25px;
	background-color: #fff;
}

.qa-1 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em 2em 1em 3em;
    color: #333333;
    font-weight: 600;
    cursor: pointer;
}

.qa-1 summary::before,
.qa-1 p::before {
    position: absolute;
    left: 1em;
    font-weight: 600;
    font-size: 1.3em;
}

.qa-1 summary::before {
    color: #75bbff;
    content: "Q";
}

.qa-1 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #333333b3;
    border-right: 3px solid #333333b3;
    content: '';
    transition: transform .5s;
}

.qa-1[open] summary::after {
    transform: rotate(225deg);
}

.qa-1 p {
    position: relative;
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 3em 1.5em;
    color: #333;
    transition: transform .5s, opacity .5s;
}

.qa-1[open] p {
    transform: none;
    opacity: 1;
}

.qa-1 p::before {
    color: #ff8d8d;
    line-height: 1.2;
    content: "A";
}

/* pc表示---------------------------------------------- */
@media screen and (min-width:680px) {
.pc-none{display: none;}

}

/* SMP表示---------------------------------------------- */
@media screen and (max-width:680px) {
/*iframe{height: 194px;}
*/
.smp-none{display: none;}
	
	.flex01,.flex02,.flex03{display: block;}
.flex01 img,.flex02 img{width: 100%;}

	.flex03 .phot{text-align: center}
	.flex04{display: block;}
	.flex04 p{width: 100%;}
}