@charset "utf-8";

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
caption, tbody, tfoot, thead,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;

}

body {
    font-size:18px;
    line-height:2em;
    font-family: "YuGothic","Yu Gothic","游ゴシック","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",”Meiryo,Osaka”,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    color:#320000;
    -webkit-text-size-adjust: 100%;
    font-weight:normal;
    background:#EBFFFF;
    letter-spacing: 3px;
}

img {
    vertical-align: middle;
    font-size:0;
    line-height: 0;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
    display:block;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a{
text-decoration:none;
color:#320000;
}

a:hover{
filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}


li {
    list-style-type: none;
}

.clearfix:after{
    content:".";
    display: block;
    height:0px;
    clear:both;
    line-height:0;
    visibility:hidden;
}


#content{
width:1000px;
background:#fff;
box-shadow: 1px 1px 10px 1px #C9C9C9;
margin:0px auto;
}

.header_area{
width:880px;
margin:0px auto;
overflow:hidden;
}

.header_area h1{
margin:25px 0px 55px;
text-align:center;
}

.header_area .yodogawa{
float:left;
width:490px;
}

.header_area .index{
float:right;
width:390px;
font-size:16px;
line-height:0em;
}

.header_area .index ul{
border-top:2px solid #E10000;
}

.header_area .index ul li{
padding:15px 0px 10px;
border-bottom:2px solid #E10000;
display:block;
line-height:1.7em;
font-weight:bold;
filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    letter-spacing: 1px;
}
.header_area .index p{
font-size:18px;
font-weight:bold;
margin-bottom:25px;
line-height:1em;
}

.header_area .index ul li a{
display:block;
}

.header_area .index ul li.on{
filter:alpha(opacity=100);
    -moz-opacity: 1;
    opacity: 1;
}

.header_area .index ul li span{
font-size:13px;
font-weight:normal;
}
.header_area .index p.small{
font-size:13px;
margin-top:40px;
letter-spacing: 1px;
line-height:1.8em;
font-weight:normal;
}

h2{
color:#E10000;
border-top:2px solid #E10000;
border-bottom:2px solid #E10000;
padding:40px 0px;
text-align:center;
margin:50px 0px;
font-size:33px;
}

#txt_area{
color:#000000;
}
#txt_area dl{
width:540px;
margin:0px auto 30px;
overflow:hidden;
}

#txt_area dt{
font-weight:bold;
font-size:16px;
width:70px;
float:left;
line-height:2em;
}
#txt_area dd{
font-weight:normal;
font-size:16px;
width:470px;
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
float:right;
letter-spacing: 2px;
line-height:2em;
}

#txt_area p.caption{
font-size:16px;
line-height:2em;
letter-spacing:2px;
width:470px;
margin:0px auto 30px;
}

.img_area_techo{
width:400px;
margin:50px auto 50px;
}

.img_area_techo p.caption{
font-size:13px!important;
padding-top:10px;
letter-spacing:1px!important;
}

.img_area{
width:600px;
margin:50px auto 50px;
}

.continue{
font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif;
text-align:center;
font-size:16px;
letter-spacing: 2px;
margin-bottom:25px;
}

.date{
font-family: "游明朝体", "Yu Mincho", YuMincho, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
text-align:center;
font-size:13px;
letter-spacing: 1px;
color:#4D4D4D;
border-bottom:2px solid #E10000;
padding-bottom:40px;
}

.btn_area{
border-bottom:2px solid #E10000;
padding:30px 0px 25px;
text-align:center;
}
.btn_area .btn_content{
width:700px;
margin:0px auto;
overflow:hidden;
}

.btn_area .btn_content .btn_prev{
float:left;
}
.btn_area .btn_content .top{
display:inline-block;
margin-top:7px;
}

.btn_area .btn_content .btn_next{
float:right;
}
.btn_area .btn_content .btn_next img{
margin-left:10px;
}
.btn_area .btn_content .btn_prev img{
margin-right:5px;
}

.sns_area{
width:600px;
margin:40px auto 45px;
}

.sns_area ul{
overflow:hidden;
}

.sns_area ul li{
float:left;
margin-right:70px;
}

.sns_area ul li.home{
float:right;
margin-right:0px;
}

.copyright{
text-align:center;
padding-bottom:45px;
}

.btn_profile{
padding-top:20px;
display:block;
}


.profile_area{
position:absolute;
left:0px;
right:0px;
width:770px;
margin:0px auto 0px;
padding:70px 40px 30px 70px;
overflow:hidden;
background:#EBFFFF;
display:none;
z-index:10;
}

.profile_area .profile_photo{
float:left;
width:300px;
}
.profile_area .profile_txt h3{
font-size:23px;
}

.profile_area .profile_txt{
float:right;
width:430px;
font-size:16px;
letter-spacing: 2px;
}

.profile_area .btn_close{
clear:both;
padding-top:20px;
font-size:12px;
text-align:center;
line-height:1.5em;
letter-spacing: 1px;
}

.pc_only{
display:block!important;
}
.pc_only2{
display:inline-block!important;
}

.sp_only{
display:none!important;
}

h3{
    padding:0px 0px 10px;
}

/*------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------*/

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

.pc_only{
display:none!important;
}
.pc_only2{
display:none!important;
}

.sp_only{
display:block!important;
}

* {
-webkit-appearance: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
letter-spacing:0px!important;
}

img{
max-width:100%;
height:auto;
}

#content,.header_area,.header_area .yodogawa,.header_area .index,#txt_area dl,#txt_area dt,#txt_area dd,#txt_area p.caption,.img_area_techo,.img_area,.btn_area .btn_content,.sns_area,.profile_area .profile_photo,.profile_area .profile_txt{
width:100%;
}

.header_area h1{
margin-top:10px!important;
margin-bottom:20px!important;
}

.header_area .index{
text-align:center;
margin-top:40px;
}

.header_area .index ul li span.num{
font-size:14px!important;
font-weight:bold!important;
}

.header_area .index ul li{
font-size:16px;
line-height:2em;
}
.header_area .index span{
font-size:10px;
}

.header_area .index p.small{
    font-size:12px;
    text-align:left;
}

.header_area{
    padding: 5% 5% 0%;
}
.profile_area{
width:90%;
padding:5%;
}

h3{
    padding:30px 0px 10px;
    font-size:18px!important;
}


.profile_txt{
    font-size:14px!important;
    line-height:2em
}

#txt_area{
padding:5%;
}

.sns_area ul li{
width:33%;
text-align:center;
margin:0px;
}

.mt40{
margin-top:40px;
}
.btn_area .btn_content .btn_prev{
margin-left:30px;
margin-bottom:30px;
}

.btn_area .btn_content .btn_next{
margin-right:30px;
margin-bottom:30px;
}

h2{
    font-size:20px;
    line-height:2em;
    padding:20px 0px;
    margin: 50px 0px 20px;
}
h2 span{
    font-size:18px;
}

#txt_area dl{
    margin-bottom:20px;
}

.img_area_techo{
margin:30px auto 30px;
}


.img_area{
margin:30px auto 30px;
}

#txt_area dd{
    line-height:1.8em;
}

}

@media screen and (max-width:320px){
  .header_area .index ul li{
    font-size:15px;
    }  
}