@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:800px;
margin-left: auto;
margin-right: auto;
padding: 0px 0px 0px 0px;
background-color: #ffffff;
display: flex;
}

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

#menu_box {
width:550px;
padding: 5px 0px 0px 0px;
}

/* -- ul#menu -------------------------------------------------------------------------------- */

#headermenu ul {
	margin:0;
	width:440px;
	padding: 15px 0px 0px 0px;
	margin-left: auto;
	list-style-type:none;
} 
#headermenu li	{
	float:left;
	position:relative;
}

#headermenu a	{
text-decoration: none;
text-align: center;
padding: 0px 10px 0px 10px;
color: #666666;
font-size: 14px;
}

#headermenu a:hover	{
color: #cccccc;
}

/*グラフィック
------------------------------------------------------------------------------------- */
#graphic {
width:100%;
height:400px;
background: url(../image/desk_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;/* 透過*/
}



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

#topic_back02 {
width:100%;
height:100%;
background: url(../image/desk_back_cloud02.svg) no-repeat center bottom;
}

#topic01 {
width: 800px;
margin-left: auto;
margin-right: auto;
display: flex;
}

#topic02 {
width: 800px;
margin-left: auto;
margin-right: auto;
display: flex;
}

#topic_left01 {
width: 400px;
}

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

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

#topic_left02 {
width: 400px;
height: 380px;
background: url(../image/schedule.svg) no-repeat right;
}

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

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

#topic_right02 {
width: 400px;
}

#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: 800px;
margin-left: auto;
margin-right: auto;
padding: 10px 0px;
display: flex;
}

#price_box {
width: 266px;
}

#price_back h1 {
font-size: 20px;
color: #27638d;
}
#price_back h2 {
font-size: 18px;
}
#price_back table {
width: 250px;
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;
}


/* 動画
------------------------------------------------------------------------------------- */
#movie_box {
width:600px;
margin-left: auto;
margin-right: auto;
}

#movie_box h1 {
	text-align: center;
	font-size: 12pt;
	}

/* フッター
------------------------------------------------------------------------------------- */
#footer_back {
width: 100%;
padding: 30px 0px 0px 0px;
background: url(../image/color/light_gray.jpg) repeat;
}

#footer {
width: 800px;
margin-left: auto;
margin-right: auto;
color: #333333;
text-align: left;
display: flex;
}

#footer_box01 {
width: 266px;
padding: 0px 0px 0px 10px;
border-right: #333333 solid 1px;
}

#footer_box02 {
width: 266px;
padding: 0px 0px 0px 10px;
}

#footer_box03 {
width: 800px;
padding: 30px 0px 0px 10px;
text-align: left;
margin-left: auto;
margin-right: auto;
}

#footer a {
text-decoration: none;
color: #333333;
}			
#footer a:hover {
opacity: 0.5;/* 透過*/
}