@charset "utf-8";

@import url("css/nav.css");
@import url("css/deco.css");
@import url("css/anime.css");

/* 全体 */

* {
box-sizing: border-box;
}
body {
color:#333;
margin: 0;
padding: 0;
text-align: center;
background: #FFF;
-webkit-text-size-adjust: 100%;
}
body {
font-family: "游ゴシック","Noto Sans JP","Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
}
body,html {
height: 100%;
}
html {
font-size:10px;
position: relative;
}
a {
outline: none;
text-decoration: none;
}
a img {
text-decoration: none;
border: none;
}
h1,h2,h3,h4,h5,h6 {
display: block;
margin: 0;
padding: 0;
}
@media screen and (max-width:1023px){
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
}
}
p,ul,ol,dl,dt,dd,figure {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
ol {
list-style-position: inside;
}
em {
font-style: normal;
}
.read em,
.attention em,
.outline em,
dt em {
color: #E07200;
}
dt,dd {
margin: 0;
}
figure img {
width: 100%;
height: auto;
}
.button {
cursor: pointer;
}
.left {
float: left;
}
.right {
float: right;
}
.clear::after {
content:"";
display: block;
height: 0;
clear: both;
}
.input-hidden {
display: none;
}
@media screen and (max-width:1023px){
.read {
line-height: 180%;
}
}
@media screen and (min-width:1024px){
.read {
line-height: 160%;
}
}

/* SP or PC */

@media screen and (max-width:1023px){
.pc{
display: none;
}
}
@media screen and (min-width:1024px){
.sp{
display: none;
}
}

/* appaer or hidden */

article.hidden {
right:-100%;
}

/* header */

body > header {
width: 100%;
height: 100%;
background: repeating-linear-gradient(0deg, rgba(230,133,0,0.1),rgba(230,133,0,0.1) 5px,transparent 5px,transparent 10px) #FEF7B1;
position: relative;
margin: 0 0 6em 0;
}
body > header > * {
position: absolute;
display: block;
}
body > header > .arrow {
left:50%;
bottom:10px;
transform: translateX(-50%);
color:#008B8B;
font-size: 1.5rem;
}
body > header > .arrow > span {
display: block;
width: 0;
height: 0;
border-top: 20px solid #008B8B;
border-left:18px solid transparent;
border-right:18px solid transparent;
margin: 0 auto;
}

/* h1 */

h1 a {
display: block;
background: url("img/img_h1.png")center center no-repeat;
background-size: auto 160px;
margin: 0 auto;
text-indent: -9999px;
}
@media screen and (max-width:1023px){
h1 {
width: 160px;
height: 160px;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
h1 a {
width: 100%;
height: 100%;
}
}
@media screen and (min-width:1024px){
h1 {
padding: 15px 0;
}
h1 a {
width: 160px;
height: 160px;
}
}

/* main */

body > main {
width: 100%;
}
@media screen and (min-width:1024px){
body > main {
position: relative;
height: 100%;
overflow-x: hidden;
}
}

/* article */

article {
background: #FFF;
z-index: 999;
}
@media screen and (max-width:1023px){
article {
padding: 0 3vw;
margin: 0 0 12em 0;
}
article:last-of-type {
margin: 0;
}
}
@media screen and (min-width:1024px){
article {
width: 100vw;
height: 100%;
transition: 1s ease;
position: absolute;
right:0;
top:0;
overflow-x: hidden;
overflow-y: auto;
}
article .container {
min-height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
article .container > .main,
article .container > .banner{
padding: 2% 4% 3% 23%;
position: relative;
}
}

/* article header */

article .container > .main > header {
position: relative;
}
@media screen and (max-width:1023px){
article .container > .main > header{
margin: 0 -3vw;
}
}

/* article .banner */

@media screen and (min-width:1024px){
article .container > .banner {
background: #CCC;
}
}

/* h2 */


article h2,
.thanks h2{
color:#008B8B;
line-height: 1.4;
margin: 0 0 30px 0;
background-position: center top;
background-repeat: no-repeat;
}
@media screen and (max-width:1023px){
article h2,
.thanks h2{
font-size:2.2rem;
padding: 0 0.5em;
}
#Class h2,
#School h2 {
padding: 180px .5em 0 .5em;
background-size: auto 170px;
}
#Class h2 {
background-image: url("img/sp/img_h2-01.jpg");
}
#School h2 {
background-image: url("img/sp/img_h2-02.jpg");
}
#Profile h2,
#Contact h2,
.thanks h2 {
padding: 90px 0 0 0;
background-size: auto 84px;
}
#Profile h2 {
background-image: url("img/sp/img_h2-03.jpg");
}
#Contact h2 {
background-image: url("img/sp/img_h2-04.jpg");
}
.thanks h2 {
background-image: url("img/sp/img_h2-05.jpg");
}
}

@media screen and (min-width:1024px){
article h2,
.thanks h2{
font-size:3rem;
}
#Class h2,
#School h2 {
padding: 220px 0 0 0;
background-size: auto 262px;
}
#Class h2 {
background-image: url("img/img_h2-01.png");
}
#School h2 {
background-image: url("img/img_h2-02.png");
}
#Profile h2,
#Contact h2,
.thanks h2 {
padding: 110px 0 0 0;
background-size: auto 107px;
}
#Profile h2 {
background-image: url("img/img_h2-03.png");
}
#Contact h2 {
background-image: url("img/img_h2-04.png");
}
.thanks h2 {
background-image: url("img/img_h2-05.png");
}
article h2 em {
font-size:3.4rem;
}
}

/* h2 .underbar */

.underbar {
background: linear-gradient(transparent 50%, #FEF7B1 0%);
}

/* section */

article section {
font-size: 1.5rem;
}
@media screen and (max-width:1023px){
article section:last-of-type {
padding: 0 0 5em 0;
}
}

/* section .main */

article section .main {
max-width: 1000px;
margin: 0 auto;
position: relative;
z-index: 20;
}

/* section.intro */

article section.intro {
margin: 0 0 30px 0;
}

/* section .yellow */

article .yellow,
article .yellow-sub{
position: relative;
background: #FEF7B1;
margin: 0 0 30px 0;
}
@media screen and (max-width:1023px){
article .yellow,
article .yellow-sub {
padding: 15px!important;
margin: 0 -3vw 30px -3vw;
text-align: left;
}
#Class .yellow {
padding:  15px 15px 0 15px!important;
}
#Class .yellow:last-of-type {
margin: 0 -3vw;
}
}
@media screen and (min-width:1024px){
article .yellow,
article .yellow-sub {
padding: 15px 20px;
border-radius: 20px;
}
article .yellow:last-of-type,
article .yellow-sub:last-of-type{
margin: 0;
}
#Class .yellow {
padding:  15px 20px 0 20px;
}
}

/* section h3 */

article .yellow h3,
article .yellow-sub h3{
text-align: left;
}
article .yellow h3 .number {
display: block;
text-indent: -9999px;
background-position: center center;
background-repeat: no-repeat;
}
@media screen and (max-width:1023px){
article .yellow h3,
article .yellow-sub h3{
font-size: 1.7rem;
}
article .yellow h3 .number {
width: 100%;
height: 50px;
background-size: auto 50px;
margin: 0 0 10px 0;
}
#Class .yellow.one h3 .number {
background-image: url("img/sp/img_number01.png");
} 
#Class .yellow.two h3 .number {
background-image: url("img/sp/img_number02.png");
}
#Class .yellow.three h3 .number {
background-image: url("img/sp/img_number03.png");
}
#School .yellow.course h3 .number {
background-image: url("img/sp/img_number00-1.png");
}
#School .yellow.price h3 .number {
background-image: url("img/sp/img_number00-2.png");
}
}
@media screen and (min-width:1024px){
article .yellow h3,
article .yellow-sub h3{
font-size: 2.5rem;
}
article .yellow h3 {
display: flex;
justify-content: space-between;
}
article .yellow h3 .number {
width: 74px;
height: 74px;
background-size: auto 74px;
}
#Class .yellow.one h3 .number {
background-image: url("img/img_number01.png");
} 
#Class .yellow.two h3 .number {
background-image: url("img/img_number02.png");
}
#Class .yellow.three h3 .number {
background-image: url("img/img_number03.png");
}
#School .yellow.one h3 .number {
background-image: url("img/img_number00.png");
}
}

/* section h3 .text */

@media screen and (max-width:1023px){
article .yellow h3 .text {
display: block;
text-align: center;
padding: 7px 0;
border-top:2px dotted #00AFCC;
border-bottom:2px dotted #00A8A8;
margin: 0 0 0.7em 0;
}
}
@media screen and (min-width:1024px){
article .yellow h3 .text {
width: calc(100% - 80px);
}
article .yellow h3 .text::before {
text-indent: -9999px;
display: block;
height: 32px;
border-bottom: 2px dotted #00A8A8;
margin: 0 0 5px 0;
}
#Class .yellow.one h3 .text::before {
content:"Common";
background: url("img/img_text01.png")left 5px center no-repeat;
background-size: auto 17px;
}
#Class .yellow.two h3 .text::before {
content:"study ?";
background: url("img/img_text02.png")left 5px center no-repeat;
background-size: auto 25px;
}
#Class .yellow.three h3 .text::before {
content:"+ love !";
background: url("img/img_text03.png")left 5px center no-repeat;
background-size: auto 20px;
}
#School .yellow.course h3 .text::before {
content:"Course";
background: url("img/img_text04.png")left 5px center no-repeat;
background-size: auto 22px;
}
#School .yellow.price h3 .text::before {
content:"Price";
background: url("img/img_text05.png")left 5px center no-repeat;
background-size: auto 22px;
}
}

/* section div.read */

@media screen and (max-width:1023px){
article .yellow .read {
text-align: left;
margin: 0 0 -15px 0;
}
#Class .yellow.one .read {
padding-bottom:140px;
background: url("img/img_photo01.png")center bottom no-repeat;
background-size: auto 160px;
}
#Class .yellow.two .read {
padding-bottom: 150px;
background: url("img/img_photo02.png")center bottom 10px no-repeat;
background-size: auto 150px;
}
#Class .yellow.three .read {
padding-bottom: 180px;
background: url("img/img_photo03.png")center bottom no-repeat;
background-size: auto 180px;
}
article .yellow .read p {
margin: 0 0 1em 0;
}
}
@media screen and (min-width:1024px){
article .yellow .read {
text-align: left;
padding-top: 40px;
padding-left: 15px;
padding-bottom:15px;
margin: 0 0 -15px 0;
}
#Class .yellow.one .read {
padding-right: 220px;
min-height: 293px;
background: url("img/img_photo01.png")right bottom no-repeat;
background-size: auto 294px;
}
#Class .yellow.two .read {
padding-right: 365px;
min-height: 253px;
background: url("img/img_photo02.png")right center no-repeat;
background-size: auto 254px;
}
#Class .yellow.three .read {
padding-right: 250px;
min-height: 363px;
background: url("img/img_photo03.png")right bottom no-repeat;
background-size: auto 364px;
}
article .yellow .read p {
margin: 0 0 1em 0;
}
#Class .yellow.three + section .button {
padding: 1em 0 0 0;
}
#Class .yellow.three + section .button a {
display: inline-block;
font-size: 1.4rem;
font-weight: 600;
color:#FFF;
background: url("img/img_point-w.png")left 2.5em center no-repeat #E07200;
background-size: 22px auto;
padding: 1.5em 2.5em 1.5em 4.5em;
margin: 0 0 0.7em 0;
border-radius: 3em;
}
#Class .yellow.three + section .button a:hover {
color:#FEF7B1;;
background: url("img/img_point-w.png")left 2.5em center no-repeat #D25200;
background-size: 22px auto;
}
}

/* #School .intro */

#Class .intro,
#School .intro {
text-align: left;
}

/* #School .intro figure */

@media screen and (max-width:1023px){
#Class .intro figure.right,
#School .intro figure.right,
#School .intro figure.left {
max-width: 260px;
margin: 0 auto;
padding: 0.5em 0;
float: none;
}
}
@media screen and (min-width:1024px){
#Class .intro figure.right,
#School .intro figure.right {
width: 276px;
margin: -2.5em 0 0 1em;
}
#School .intro figure.left {
width:216px;
}
}

/* #School .intro h3 */

#Class .intro h3,
#School .intro h3 {
color: #008B8B;
}
@media screen and (max-width:1023px){
#Class .intro h3,
#School .intro h3 {
text-align: center;
font-size: 1.7rem;
margin: 0 0 .7rem 0;
}
}
@media screen and (min-width:1024px){
#Class .intro h3,
#School .intro h3 {
font-size: 2.0rem;
margin: 0 0 1.7rem 0;
}
}

/* #School .intro .read & .dotted */

#School .dotted {
border:2px dotted #008B8B;
padding: 0.7em 1em;
margin: 0 0 1.0rem 0;
}
@media screen and (max-width:1023px){
#School .dotted {
padding: 1em 1.3em;
}
#School .intro > .read {
margin: 0 0 1em 0;
}
}
@media screen and (min-width:1024px){
#Class .intro .read {
margin: 0 28rem 3.0rem 0;
}
#School .intro .read {
margin: 0 0 3.0rem 0;
}
#School .dotted {
padding: 2.0rem 4.0rem;
}
#School .intro .dotted figure ~ ul {
margin: 0 0 20px 240px;
}
}

/* section Youtube*/

@media screen and (max-width:1023px){
section.youtube {
padding: 0 0 3em 0;
}
section.youtube .main {
width: 300px;
margin: 0 auto;
}
section.youtube .main iframe {
width: 100%;
height: calc(300px * 0.563);
}
}
@media screen and (min-width:1024px){
section.youtube {
padding: 0 0 40px 0;
}
section.youtube .main {
width: 640px;
margin: 0 auto;
}
section.youtube .main iframe {
width: 100%;
height: calc(640px * 0.563);
}
}


/* .style-table */

#School .attention {
margin: 0.5rem auto;
}
#School .dotted .attention {
width: 90%;
}
article .style-table {
text-align: left;
background: #FFF;
border-top: 1px solid #00AFCC;
border-left: 1px solid #00AFCC;
border-right: 1px solid #00AFCC;
}
article .style-table > * {
padding: 7px;
border-bottom: 1px solid #00AFCC;
}
article .style-table dt {
color: #008B8B;
font-weight: 600;
}
article .style-table .number {
width: 2.4rem;
line-height: 2.4rem;
font-size: 1.4rem;
font-weight: normal;
text-align: center;
color:#FFF;
background: #008B8B;
border-radius: 50%;
}
@media screen and (max-width:1023px){
#School .attention {
text-align: center;
}
article .style-table dt {
border-bottom: 1px dotted #00AFCC;
}
article .style-table dd {
padding: 7px 7px 15px 7px;
}
article .style-table .number {
display: block;
float: left;
}
article .style-table .number + .text {
display: block;
line-height: 140%;
padding: 0 0 0 2.2em;
}
article .style-table .number + .text::after {
content:"";
display: block;
width: 0;
height: 0;
clear: both;
}
}
@media screen and (min-width:1024px){
#School .attention {
text-align: right;
}
#School .style-table {
width: 90%;
}
#School ul.style-table {
margin: 0 auto 1em auto;
}
#School dl.style-table {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
margin: 1.5rem auto 0 auto;
}
#School .style-table > * {}
#School .style-table .sub {}
#School .course .style-table dt {
width: 45%;
border-right: 1px solid #00AFCC;
}
#School .course .style-table dd {
width: 55%;
}
#School .price .style-table dt {
width: 30%;
}
#School .price .style-table dd {
width: 70%;
}
article .style-table .number {
display: inline-block;
margin: 0 0.4em 0 0;
}
}

/* section .yellow-sub */

article .yellow-sub figure.photo ~ * {
text-align: left;
}
article .yellow-sub h4 {
font-size: 1.7rem;
color: #008B8B;
padding: 0 0 0.3em 25px;
background: url("img/img_point-b.png")left center no-repeat;
background-size: 20px auto;
}
article .yellow-sub .chrono {
padding: 1em 0 0 0;
}
article .yellow-sub .chrono dt {
float: left;
color: #008B8B;
padding: 0.3em 0;
}
article .yellow-sub .chrono dd {
padding: 0.3em 0 0.3em 4em;
margin: 0 0 0.3em 0;
border-bottom:1px dotted #008B8B;
}
@media screen and (max-width:1023px){
article .yellow-sub figure.photo {
width: 105px;
margin: 0 ;
}
article .yellow-sub figure.photo + .name {
margin: 0 0 0 120px;
min-height: 115px;
}
article .yellow-sub .title {
padding: 10px 0;
margin: 10px 0 0 0;
border-top:1px dotted #008B8B;
}
article .yellow-sub h4 {
margin: 0 0 .3em 0;
}
article .yellow-sub .outline {
padding: 0.5em 0 0 0;
margin: 0.5em 0 0 0;
border-top:1px dotted #008B8B;
}
article .yellow-sub .outline p,
article .yellow-sub .outline .list-p{
line-height: 160%;
}
}
@media screen and (min-width:480px) and (max-width:1023px){
#Contact .yellow-sub .attention {
padding: 0 10% 0.5em 10%;
}
}
@media screen and (min-width:1024px){
article .yellow-sub figure.photo {
width: 210px;
}
article .yellow-sub figure.photo ~ * {
margin: 20px 0 0 230px;
}
article .yellow-sub .title {
padding: 10px 0;
margin: 10px 0 0 0;
border-top:2px dotted #008B8B;
border-bottom:2px dotted #008B8B;
}
article .yellow-sub .outline {
padding: 15px 0 10px 0;
text-align: left;
}
article .yellow-sub .chrono {
padding: 1em 0 0 0;
}
article .yellow-sub .chrono dt {
float: left;
color: #008B8B;
padding: 0.3em 0;
}
article .yellow-sub .chrono dd {
padding: 0.3em 0 0.3em 4em;
margin: 0 0 0.3em 0;
border-bottom:1px dotted #008B8B;
}
}

/* section .list-p */

article .list-p li {
background-image: url("img/img_point-p.png");
background-repeat: no-repeat;
background-size: 10px auto;
}
@media screen and (max-width:1023px){
article .list-p li {
padding: 0 0 .5em 20px;
margin: 0 0 .5em 0;
border-bottom:1px dotted #008B8B;
background-position: left 5px top 5px;
}
article .list-p li:last-of-type {
margin: 0;
border-bottom: none;
}
}
@media screen and (min-width:1024px){
article .list-p li {
padding: 0 0 0 20px;
background-position: left 5px center;
}
}

/* .yellow-sub .attention */

.yellow-sub .attention {
margin: 0 0 .5em 0;
}

/* section .inquiry-list */

.inquiry-list * {
font-size:1.5rem;
text-align: left;
font-family: "游ゴシック","Noto Sans JP","Yu Gothic", "游ゴシック体", YuGothic, sans-serif;
}
.inquiry-list dt {
color:#008B8B;
font-weight: 600;
padding: 5px 0;
}
.inquiry-list dd {
margin: 0 0 5px 0;
}
.inquiry-list dd p:not(:last-child){
padding: 0 0 0.3em 0;
}
@media screen and (min-width:480px) and (max-width:1023px){
.inquiry-list {
padding: 0 10%;
}
}
@media screen and (min-width:1024px){
section > .inquiry-list {
padding: 5px 0 0 0;
margin: 4% 4% 0 4%;
border-top:1px dotted #00AFCC;
}
.inquiry-list dt {
float: left;
}
.inquiry-list dd {
padding: 5px 0 10px 12em;
border-bottom: 1px dotted #00AFCC;
}
.inquiry-list dd:last-of-type {
border-bottom: none;
}
.inquiry-list ul {
display: flex;
justify-content:flex-start;
padding: 0 0 0.8em 0;
}
.inquiry-list li {
margin: 0 2em 0 0;
}
}

/**/

#Check-class:checked ~ .inquiry-class {
display: block;
}
ul .kind-class::before,
ul .kind-school::before,
ul .kind-etc::before {
content:"";
display: inline-block;
width: 14px;
height: 14px;
vertical-align: middle;
margin: 0 0.3em 0 0;
border:1px solid #008B8B;
background-color: #FFF;
background-position: center center;
background-repeat: no-repeat;
background-size: 12px auto;
}
#Check-class:checked ~ ul .kind-class::before,
#Check-school:checked ~ ul .kind-school::before,
#Check-etc:checked ~ ul .kind-etc::before {
background-image: url("img/img_icon-check.png");
}
#Check-school:checked ~ .inquiry-school {
display: block;
}
.inquiry-list label {
cursor: pointer;
}
.inquiry-list.sub {
display: none;
padding: 10px 0 0 0;
border-top: 1px dotted #00AFCC;
}
@media screen and (max-width:1023px){
.inquiry-list label {
display: block;
padding: 1em 0.7em;
margin: 0 0 0.3em 0;
border:1px solid rgba(0,130,153,0.5);
background: #FFF;
border-radius: 2em;
}
.inquiry-list select {
border:1px solid rgba(0,130,153,0.5);
background: #FFF;
}
.inquiry-list.sub {
border-top: none;
}
}

/* section .inquiry-list form items */

.inquiry-list input[type="text"],
.inquiry-list textarea {
border:1px solid rgba(0,130,153,0.5);
background: #FFF;
padding: 7px;
}
.inquiry-list textarea {
line-height: 160%;
height: calc(1.6em * 3 + 10px) !important;
}
.inquiry-list input[type="button"] {
font-size:1.3rem;
color:#FFF;
border:1px solid rgba(0,130,153,0.5);
background: rgba(0,130,153,0.5);
padding: 7px;
border-radius: 6px;
cursor: pointer;
}
.button input[type="submit"],
.button input[type="reset"] {
border:2px solid #008B8B;
border-radius: 5rem;
cursor: pointer;
}
.button input[type="submit"] {
color:#FFF;
background: #008B8B;
}
.button input[type="reset"] {
color:#008B8B;
background: #FFF;
}
.button input[type="submit"]:hover {
background: #00627A;
}
.button input[type="reset"]:hover {
background: #CCC;
}
@media screen and (max-width:1023px){
.inquiry-list .short {
width: 10em!important;
}
.inquiry-list .middle,
.inquiry-list .long {
width: 100%!important;
}
}
@media screen and (max-width:1023px){
.inquiry-list + .button {
display: flex;
justify-content: space-between;
padding: 0.7em 10% 0 10%;
}
.inquiry-list + .button li {
width: 99%;
}
.inquiry-list + .button li:first-of-type{
margin: 0 2% 0 0;
}
.button input[type="submit"],
.button input[type="reset"] {
width: 100%;
text-align: center;
padding: 1.5rem 0;
}
}
@media screen and (min-width:1024px){
.inquiry-list .short {
width: 10em!important;
}
.inquiry-list .middle {
width: 20em!important;
}
.inquiry-list .long {
width: 80%!important;
}
.inquiry-list + .button {
display: flex;
justify-content: center;
padding: 0 0 1.5rem 0;
}
.inquiry-list + .button li:first-of-type {
margin: 0 0.5em 0 0;
}
.button input[type="submit"],
.button input[type="reset"] {
padding: 1.5rem 5rem;
}
}

/* price */

#School .yellow.price .price {
color:#CF4500;
}

/* .illust */

#School .illust {
display: flex;
} 
#School .illust figcaption {
font-size: 1.7rem;
color: #008B8B;
font-weight: 600;
margin: 0 0 0.7em 0;
padding: 0.5em 0;
border-top:2px dotted #4CC2C2;
border-bottom:2px dotted #4CC2C2;
}
#School .illust .button {
text-align: center;
}
#School .illust .button span,
#School .relation .button span{
display: inline-block;
font-size: 1.4rem;
font-weight: 600;
color:#FFF;
background: url("img/img_icon-sound.png")left 12px center no-repeat #008B8B;
background-size: 12px auto;
padding: 0.5em 1em 0.5em 2.5em;
margin: 0 0 0.7em 0;
border-radius: 1.5em;
}

@media screen and (max-width:1023px){
#School .illust {
flex-direction: column;
padding: 2em 0;
text-align: center;
}
#School .illust > .item:first-of-type {
margin: 0 0 1em 0;
}
#School .illust > .item:first-of-type figure img {
max-width: 140px;
}
#School .illust figcaption {
text-align: center;
}
#School .illust .item:nth-of-type(2) figure img{
max-width: 500px;
}
}
@media screen and (min-width:1024px){
#School .illust {
justify-content: center;
padding: 2em 0;
} 
#School .illust .item {
width: 100%;
}
#School .illust .item:nth-of-type(1) {
padding: 0 4em 0 0;
}
#School .illust figure {
text-align: center;
}
#School .illust .item:nth-of-type(1) figure img{
min-width:250px;
max-width: 250px;
margin: 0 auto;
}
#School .illust .item:nth-of-type(2) figure img{
min-width:500px;
max-width: 500px;
}

#School .illust .item .read {
font-size: 1.3rem;
margin: 0;
}
#School .illust .button span:hover,
#School .relation .button span:hover{
background: url("img/img_icon-sound.png")left 12px center no-repeat #006868;
background-size: 12px auto;
}
#School .illust .button span:first-child {
margin: 0 0.5em 0.7em 0;
}
}

/* .relation */

#School .relation {
border:1px dotted #008B8B;
padding: 0.6em;
margin: 1em 0;
display: flex;
}
#School .relation p {
}
#School .relation .read {
margin: 0;
}
#School .relation .button {
white-space: nowrap;
}
@media screen and (max-width:1023px){
#School .relation {
flex-direction: column-reverse;
}
#School .relation .button {
margin: 0.6em 0 0 0;
text-align: center;
}
}
@media screen and (min-width:1024px){
#School .relation {
align-items: center;
}
#School .relation .button {
margin: 0 2em 0 0;
}
}


/* footer */

footer {
width: 100%;
background: #008B8B;
}
footer .copyright {
padding: 5px 0 10px 0;
font-size: 1.4rem;
color:#FFF;
}
@media screen and (max-width:1023px){
article footer {
display: none;
}
}
@media screen and (max-width:1024px){
article footer {
display: none;
}
}

/* thanks */

.thanks {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.thanks .read {
font-size: 1.5rem;
line-height: 160%;
padding: 30px;
border-radius: 10px;
background: #FEF7B1;
}
.thanks .button {
padding: 2em 0 0 0;
}
.thanks .button a {
display: inline-block;
color:#FFF;
background-color: #008B8B;
}
@media screen and (max-width:1023px){
.thanks {
width: 90%;
}
.thanks .button a {
padding: 1em 2em 1em 4em;
border-radius: 2.5em;
text-align: left;
background-image: url("img/img_point-w.png");
background-position: left 1.5em center;
background-repeat: no-repeat;
background-size: 20px auto;
}
}
@media screen and (min-width:1024px){
.thanks .button a {
padding: 1.2em 2em;
border-radius: 2.5em;
}
.thanks .button a::before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
vertical-align: middle;
margin: 0 0.3em 0 0;
background: url("img/img_point-w.png")center center no-repeat;
background-size: 20px auto;
}
}