@charset "UTF-8";

* {
margin: 0;
padding: 0;
background-color: transparent;
font-weight: normal;
font-style: normal;
}

body {
font-family: "M PLUS 1p",Osaka,verdana,arial,helvetica,clean,Sans-Serif;
font-size: 10pt;
line-height: 150%;
}

/* ヘッダーを幅いっぱいにする為のボックス
------------------------------------------------------------------------------------- */
#headermenu {
height:60px;
width:100%;
padding: 0px 0px 0px 0px;
background-color: #ffffff;
}

#top_logo {
width:70%;
height:60px;
background: url(../image/logo.svg) no-repeat left;
}

/*グラフィック
------------------------------------------------------------------------------------- */
#graphic {
width:100%;
height:600px;
background: url(../image/mobile_top.png) no-repeat center;
}


/*お試しボタン
------------------------------------------------------------------------------------- */
#test_entry {
width:300px;
height:70px;
margin: 20px auto 40px auto;
}

#test_entry a {
text-decoration: none;
display: inline-block;
width:300px;
height:70px;
}
    
#test_entry a:hover {
opacity: 0.5;/* 透過*/
}


/*トピック01
------------------------------------------------------------------------------------- */
#topic_back01 {
width:100%;
height:100%;
background: url(../image/mobile_back_cloud01.svg) no-repeat center bottom;
}

#topic_back02 {
width:100%;
height:100%;
background: url(../image/mobile_back_cloud02.svg) no-repeat center bottom;
}
    
#topic01 {
width: 85%;
margin-left: auto;
margin-right: auto;
}

#topic02 {
width: 85%;
margin-left: auto;
margin-right: auto;
display: flex;
flex-direction: column;
}

#topic_left01 {
width: 100%;
text-align: center;
}

#topic_right01 {
width: 380px;
height: 380px;
background: url(../image/notepc01.png) no-repeat center;
}




#topic_left02 {
height: 380px;
width: 380px;
margin-left: auto;
margin-right: auto;
background: url(../image/schedule.svg) no-repeat right;
order: 2;
}

#topic_right02 {
width: 100%;
text-align: center;
order: 1;
}

#topic_right03 {
width: 380px;
height: 380px;
background: url(../image/world_eco.svg) no-repeat center;
}

#topic_box {
width: 100%;
padding: 10px;
border-top: 2px solid;
border-bottom: 2px solid;
text-align:left;
}

#topic_box p {
text-indent: 1em;/* 字下げ*/
text-align:justify;/* 均等割*/
line-height: 1.8;/* 行間*/
letter-spacing: 0.05em/* 字間*/
}

#topic_box a {
text-decoration: none;
display: inline-block;
}
                
#topic_box a:hover {
opacity: 0.5;/* 透過*/
}

/*price
------------------------------------------------------------------------------------- */
#price_back {
width:100%;
height:100%;
text-align: center;
padding: 30px 0px;
background: url(../image/color/sky.jpg) repeat;
}

#price {
width:90%;
margin-left: auto;
margin-right: auto;
padding: 10px 0px;
}

#price_box {
width: 100%;
padding: 0px 0px 40px 0px;
}

#price_back h1 {
font-size: 20px;
color: #27638d;
}
#price_back h2 {
font-size: 18px;
}
#price_back table {
width: 100%;
font-size: 14px;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
#price_back th {
width: 100%;
background-color: #27638d;
color: #ffffff;
padding: 10px 0px;
}
#price_back td {
width: 100%;
background-color: #ffffff;
color: #333333;
padding: 10px 0px;
}
span.del {
text-decoration-line: line-through;
text-decoration-style:double;
text-decoration-color: red;
}
span.new_period {
font-size: 16pt;
color: red;
}


/*スクール編
------------------------------------------------------------------------------------- */
#school_contents {
width: 100%;
background-color: #bbdbf3;
}

#school_contents_title {
width:100%;
background-color: #1c305c;
}

#school_contents_title h1 {
font-size: 16pt;
padding: 15px 20px 10px 20px;
color: #ffffff;
}

#school_contents_text h1 {
font-size: 16pt;
padding: 15px 20px 0px 20px;
color: #000000;
}

#school_contents_text p {
padding: 20px;
font-size: 12pt;
}


/* ボタン
------------------------------------------------------------------------------------- */
#button01  {
padding: 0px 20px 20px 20px;
width: 200px;
margin-left: auto;
}

#button01 a  {
padding: 10px 0px 0px 0px;
text-decoration: none;
display: inline-block;
width: 200px;
height: 28px;
border-radius: 28px;          /* 角丸 */
font-size: 11pt;        /* 文字サイズ */
text-align: center;      /* 文字位置 */
cursor: pointer;     /* カーソル*/
color: #1c305c;
border: solid 1px #1c305c;    /*枠の指定*/
}

#button02 {
padding: 0px 20px 20px 20px;
width: 250px;
margin-left: auto;
margin-right: auto;
}

#button02 a {
padding: 15px 0px 0px 0px;
text-decoration: none;
display: inline-block;
width: 250px;
height: 34px;
border-radius: 34px;          /* 角丸 */
font-size: 11pt;        /* 文字サイズ */
text-align: center;      /* 文字位置 */
cursor: pointer;     /* カーソル*/
color: #ffffff;
border: solid 1px #db7093;    /*枠の指定*/
background-color: #db7093;
}

#button02 a:hover {
border: solid 1px #ffb6c1;    /*枠の指定*/
background-color: #ffb6c1;
}

/* 動画
------------------------------------------------------------------------------------- */
#movie_box {
    width:100%;
    margin-left: auto;
    margin-right: auto;
}
    
#movie_box h1 {
    text-align: center;
    font-size: 12pt;
}


/* フッター
------------------------------------------------------------------------------------- */
#footer_back {
width: 100%;
background: url(../image/color/light_gray.jpg) repeat;
}
    
#footer {
width: 80%;
padding: 20px 0px;
margin-left: auto;
margin-right: auto;
color: #333333;
text-align: left;
}

#footer_box03 {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	color: #333333;
	text-align: left;
	}
    
#footer a {
text-decoration: none;
color: #333333;
}			
#footer a:hover {
opacity: 0.5;/* 透過*/
}