@charset "UTF-8";
/* CSS Document */
/*
marginプロパティ
値が１つ 上下左右
値が２つ　[上下][左右]
値が３つ　[上][左右][下]
値が４つ　[上][右][下][左]
*/

*{
margin:0px;/*ブラウザのマージン*/
padding:0px;
}

body{
background-color:#EEEEEE;
font-family:"游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;/*フォントファミリー*/

}

.logo{
font-size:40px;
font-weight: bold;
margin:10px 50px;
}

.box1{
width:95%;
margin:0px 5%;
}
.box1 h1{
font-size:30px;
font-weight: bold;
margin:5px 5px;
color:#808080;
}
.box1 h2{
font-size:20px;
font-weight: bold;
margin:5px 5px;
color:#222222;

}
.box1 ul{
font-size:15px;
margin:10px 30px;

}

.img1{
width:800px;
display:block;
}
.img2{
width:100%;
display:none;
}
.img3{
width:600px;
display:block;
}


.linkimage{
margin-left:450px;
margin-right:auto;
text-align: left;
}

.description{
margin-left:450px;
margin-right:auto;
text-align: left;
}
.description a:link {color:#333333; } /*未訪問のリンクの色*/
.description a:visited {color:#AAAAAA;} /*訪問済みのリンクの色*/
.description a:hover {color:#ffffff; background:#0000cc;} /*カーソルが乗っているリンクの色*/
.description a:active {color:#ffff00;} /*クリック中のリンクの色*/

#app_button1{
margin:10px 2px;
}
#app_button2{
margin:10px 2px;
}

.footer{
margin:10px 30px;

}

.footer ul{

text-align: right;
list-style: none;
}
.footer p{
float:left;
}

.footer a:link {color:#333333; } /*未訪問のリンクの色*/
.footer a:visited {color:#AAAAAA;} /*訪問済みのリンクの色*/
.footer a:hover {color:#ffffff; background:#0000cc;} /*カーソルが乗っているリンクの色*/
.footer a:active {color:#ffff00;} /*クリック中のリンクの色*/


.tab_wrap{/*タブの内容表示部分*/
width:100%; 
margin:5px 0px;
}

input[type="radio"]{display:none;}

.tab_area{/*タブ全体*/
font-size:0; 
padding:0 45px;
}

.tab_area label{/*タブの文字部分*/
font-family:"游ゴシック Medium","Yu Gothic Medium","游ゴシック体",YuGothic,sans-serif;/*フォントファミリー*/
width:130px; /*タブの幅*/
font-weight: bold;
display:inline-block; 
padding:14px 0 12px; 
color:#fff; 
background:#90c9cc; 
text-align:center; 
font-size:13px; 
cursor:pointer; 
transition:ease 0.2s opacity; 
border-top-left-radius:10px; 
border-top-right-radius:10px; 
vertical-align:bottom; 
transition:ease 0.2s; 
margin:10px 5px 0;
}
.tab_area label:hover{opacity:0.5;}

.panel_area{/*内容表示部分の背景*/
background:#ffffff; 
}

.tab_panel{width:100%; padding:30px 0; display:none;}
.tab_panel p{font-size:14px; letter-spacing:1px; text-align:center;}

#tab1:checked ~ .tab_area .tab1_label{background:#fff; color:#000;}
#tab1:checked ~ .panel_area #panel1{display:block;}
#tab2:checked ~ .tab_area .tab2_label{background:#fff; color:#000;}
#tab2:checked ~ .panel_area #panel2{display:block;}
#tab3:checked ~ .tab_area .tab3_label{background:#fff; color:#000;}
#tab3:checked ~ .panel_area #panel3{display:block;}



@media screen and (max-width: 768px) {

.logo{
font-size:40px;
font-weight: bold;
margin:10px 20px;
}

.img1{
width:100%;
display:block;
}
.img2{
display:none;
}

.img3{
width:60%;
display:block;
}


.linkimage{
margin-left:auto;
margin-right:30px;
text-align: right;
}
.description{
margin-left:auto;
margin-right:30px;
text-align: right;
}

.box1 h1{
font-size:28px;
}

.box1 h2{
font-size:18px;
}
.box1 ul li{
font-size:15px;
}

.tab_area{/*タブ全体*/
font-size:0; 
padding:0 3%;
}

.tab_area label{/*タブの文字部分*/
width:30%; /*タブの幅*/
font-size:14px;
}

.tab_area label:hover{/*タブにカーソルが当たった時*/
opacity:1;
}
	

}

@media screen and(max-width:768px),
screen and (orientation: portrait){/*スマホで縦向きの場合*/

.linkimage{
margin-right:auto;
margin-left:25px;
text-align: left;
}
.description{
margin-right:auto;
margin-left:25px;
text-align: left;
}


.img2{
display:block;
}
.img1{
display:none;
}
.img3{
width:100%;
display:block;
}


}