@charset "UTF-8";

html{
height:100%;
}

body{
font-family:"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","Meiryo","メイリオ","Osaka","MS PGothic","ＭＳ Ｐゴシック",sans-serif;
text-align:center;
margin:0;
padding:0;
background-color:#fff;
}

a{
text-decoration:none;
text-decoration:underline;
color:#0099cc;
}

a:hover{
text-decoration:none;
}

img{
border:none;
}

p,h1{
margin:0;
padding:0;
line-height:1.5;
}
dd{
margin:0;
padding:0;
}

.contents-wrapper{
width:100%;
background-color:#fff;
}

.contents{
max-width:800px !important;
width:800px;
margin:0 auto;
padding-top:35px;
padding-bottom:50px;
position:relative;
}

.site-name{
text-indent:-9999px;
margin:0 auto;
width:100%;
background-image:url(../img/logo_01.png);
background-repeat:no-repeat;
background-size:contain;
background-position:top left;
}
.site-name a{
height:65px;
width:392px;
display:block;
}

.navigation-wrapper{
background-image:url(../img/bg_navi.png);
background-repeat:no-repeat;
background-position:bottom left;
position:relative;
padding-bottom:5px;
}

dl#navigation{
list-style:none;
margin:0;
padding:0;
overflow:hidden; /*下部の隙間を消す*/
font-size:0.1em; /*下部の隙間を消す*/
line-height:0; /*下部の隙間を消す*/
zoom:1;
}
dl#navigation:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
dl#navigation dt{
display:none;
}
dl#navigation dd a{
float:left;
height:45px;
margin-right:4.625%;
display:block;
text-indent:-9999px;
}
dl#navigation dd.photo a{
width:10.625%;
background:url(../img/navi_01_o.png) no-repeat;
background-size:contain;
background-position:top;
}
dl#navigation dd.photo a:hover{
background:url(../img/navi_01_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.video a{
width:9.75%;
background:url(../img/navi_02_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.video a:hover{
background:url(../img/navi_02_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.work a{
width:9.375%;
background:url(../img/navi_03_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.work a:hover{
background:url(../img/navi_03_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.about a{
width:10.75%;
background:url(../img/navi_04_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.about a:hover{
background:url(../img/navi_04_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.info a{
width:7.375%;
background:url(../img/navi_05_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.info a:hover{
background:url(../img/navi_05_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.diary a{
width:9.625%;
background:url(../img/navi_06_o.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.diary a:hover{
background:url(../img/navi_06_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}
dl#navigation dd.contact a{
width:14.75%;
background:url(../img/navi_07_o.png) no-repeat;
background-size:contain;
background-position:bottom;
margin-right:0;
}
dl#navigation dd.contact a:hover{
background:url(../img/navi_07_h.png) no-repeat;
background-size:contain;
background-position:bottom;
}

.topic-path{
width:100%;
padding:17px 0 18px;
zoom:1;
}
.topic-path:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
.topic-path p{
font-size:0.63em;
font-weight:normal;
text-align:left;
float:left;
}

.section_01{
zoom:1;
margin-bottom:50px;
}
.section_01:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
.section_01 p img{
vertical-align:bottom;
max-width:100% !important;
height:auto !important;
width:auto; /*for IE8*/
}
.section_01.first{
margin-bottom:18px;
}
.section_01 h1,
.section_01 p,
.section_01 ul{
text-align:left;
}
.section_01.sentence_01 h1{
margin-top:0;
margin-bottom:10px;
padding:0 100px;
font-size:1.25em;
font-weight:bold;
line-height:1.7;
letter-spacing:1px;
}
.section_01.sentence_02 h1{
margin-top:0;
margin-bottom:10px;
padding:0;
font-size:1.25em;
font-weight:bold;
line-height:1.7;
letter-spacing:1px;
}
.section_01.sentence_01.first h1,
.section_01.sentence_02.first h1{
margin-bottom:0;
}
span.sub-title{
color:#ccc;
font-size:0.75em;
}
.section_01.sentence_01 p,
.section_01.sentence_01 ul{
margin:0;
padding:0 100px;
font-size:0.94em;
line-height:1.7;
}
.section_01 p.title{
font-size:1.06em;
font-weight:bold;
margin-bottom:10px;
}
.section_01 p.continue{
margin-bottom:10px;
}
.section_01 p.term{
text-align:center;
}
.section_01 ul{
list-style:none;
}

.link_01{
font-size:1em;
line-height:28px;
display:inline-block;
}
.link_01 a{
font-weight:bold;
text-decoration:none;
word-wrap:break-all;
word-break:break-all;
color:#000;
padding-top:4px;
padding-bottom:2px;
padding-left:40px;
display:block;
background:url(../img/icon_01_o.png) no-repeat;
}
.link_01 a:hover{
color:#ccc;
background:url(../img/icon_01_h.png) no-repeat;
}
.link_01 a span.sub{
color:#ccc;
}
.link_01 a:hover span.sub{
color:#000;
}

.movie{
position:relative;
width:100%;
padding-top:56.25%;
}
.movie iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

.page-navi-wrap{
width:100%;
background-color:#fff;
}
.page-navi{
max-width:800px !important;
width:800px;
margin:0 auto;
padding:10px 0;
zoom:1;
}
.page-navi:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
.page-top{
float:right;
width:34px;
height:34px;
}
.page-top img{
width:100%;
height:auto;
vertical-align:top;
}

.footer{
max-width:800px !important;
width:800px;
margin:0 auto;
}
.copyright{
line-height:1.5em;
font-size:0.75em;
color:#3A7F6B;
padding:18px 0;
}

@media screen and (min-width:320px) and (max-width:767px) {
.contents{
padding-top:10px;
padding-bottom:28px;
}
.navigation-wrapper{
width:100%;
z-index:10;
}
dl#navigation{
width:150px;
position:absolute;
top:-58px;
right:0;
}
dl#navigation dt{
display:block;
zoom:1;
}
dl#navigation dt:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
dl#navigation dt a{
display:block;
height:50px;
width:40px;
float:right;
text-indent:-9999px;
}
dl#navigation.close dt a{
background:url(../img/button_01_open.png) no-repeat;
}
dl#navigation.open dt a{
background:url(../img/button_01_close.png) no-repeat;
}
dl#navigation dt a{
}
dl#navigation dd{
border-bottom:1px solid #ccc;
background-color:#FFF;
zoom:1;
}
dl#navigation.close dd{
display:none;
}
dl#navigation dd:after{
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
dl#navigation dd a{
height:50px;
padding:0 10px;
margin-bottom:0;
margin-right:0;
}
dl#navigation dd.photo a{
background:url(../img/navi_s_01_o.png) no-repeat;
background-size:contain;
background-position:10px 0;
width:130px;
}
dl#navigation dd.photo a:hover{
background:url(../img/navi_s_01_h.png) no-repeat;
background-size:contain;
background-position:10px 0;
}
dl#navigation dd.video a{
background:url(../img/navi_s_02_o.png) no-repeat;
background-size:contain;
background-position:10px 0;
width:130px;
}
dl#navigation dd.video a:hover{
background:url(../img/navi_s_02_h.png) no-repeat;
background-size:contain;
background-position:10px 0;
}
dl#navigation dd.work a{
background:url(../img/navi_s_03_o.png) no-repeat;
background-size:contain;
background-position:10px 0;
width:130px;
}
dl#navigation dd.work a:hover{
background:url(../img/navi_s_03_h.png) no-repeat;
background-size:contain;
background-position:10px 0;
}
dl#navigation dd.about a{
background:url(../img/navi_s_04_o.png) no-repeat;
background-size:contain;
background-position:10px 0;
width:130px;
}
dl#navigation dd.about a:hover{
background:url(../img/navi_s_04_h.png) no-repeat;
background-size:contain;
background-position:10px 0;
}
dl#navigation dd.info a{
background:url(../img/navi_s_05_o.png) no-repeat;
background-size:contain;
background-position:10px 0;
width:130px;
}
dl#navigation dd.info a:hover{
background:url(../img/navi_s_05_h.png) no-repeat;
background-size:contain;
background-position:10px 0;
}
dl#navigation dd.diary a{
background:url(../img/navi_s_06_o.png) no-repeat;
background-size:contain;
background-position:10px 0;
width:130px;
}
dl#navigation dd.diary a:hover{
background:url(../img/navi_s_06_h.png) no-repeat;
background-size:contain;
background-position:10px 0;
}
dl#navigation dd.contact a{
background:url(../img/navi_s_07_o.png) no-repeat;
background-size:contain;
background-position:10px 0;
width:130px;
}
dl#navigation dd.contact a:hover{
background:url(../img/navi_s_07_h.png) no-repeat;
background-size:contain;
background-position:10px 0;
}
}

@media screen and (min-width:499px) and (max-width:767px) {
.section_01{
margin-bottom:28px;
}
.section_01.sentence_01 h1,
.section_01.sentence_01 p,
.section_01.sentence_01 ul{
padding-right:50px;
padding-left:50px;
}
}

@media screen and (min-width:499px) and (max-width:799px) {
.contents{
padding-right:20px;
padding-left:20px;
width:auto;
}
.page-navi{
padding-right:20px;
padding-left:20px;
width:auto;
}
.footer{
width:auto;
}
}

@media screen and (min-width:320px) and (max-width:498px) {
.navigation-wrapper{
margin-bottom:18px;
}
.contents{
padding-top:7px;
padding-right:10px;
padding-left:10px;
width:auto;
}
dl#navigation{
top:-54px;
}
.site-name{
background-image:url(../img/logo_01_320.png);
}
.site-name a{
height:57px;
width:240px;
}
.topic-path{
display:none;
}

.section_01{
margin-bottom:18px;
}
.section_01.sentence_01 h1{
margin-bottom:5px;
padding-right:0;
padding-left:0;
}
.section_01.sentence_01 p,
.section_01.sentence_01 ul{
padding-right:0;
padding-left:0;
}
.section_01.sentence_02 h1{
margin-bottom:5px;
}

br.one-line{
display:none;
}

.page-navi{
padding-right:10px;
padding-left:10px;
width:auto;
}
.footer{
width:auto;
}
}

div.vid_contents {
width: 100%;/*背景色を横幅いっぱいに広げる*/
text-align: 
margin: auto;
}
padding: 0% 0% 0% 0%;/*ここで動画の周りの余白を調整*/
background: #ffffff;/*余白の背景色*/
}
video.vid_main {
width: 100%!important;
max-width: 800px !important;/*PC版での最大幅*/
}

iframe[src*="instagram"] {
    width: 100%;
}

@media screen and (min-width: 768px) {
    iframe[src*="instagram"] {
        width: 612px; 
        height: 710px;
    }
}

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


.page-top{
display:none;
}


img[src*="photo_99.jpg"]{
transform:scale(1.20);
}

.section_01 img,
.section_01 video{
width:100%;
height:auto;
display:block;
}