/* フリックできるコンテンツギャラリー */
.content-gallery{
  display: -ms-flexbox;/*--- IE10 ---*/
  display: -webkit-flex;/*--- safari（PC）用 ---*/
  display:flex;
  padding:20px 0;
  overflow-x: scroll;
}
 
.content-gallery .content-gallery-card {
max-width:95%;
min-width:100%;
  margin: 0 5% 0 0;
  padding: 10px;
box-sizing:border-box;
  background-color: #FFF;
  border: solid 1px #CCC;
}

.content-gallery .content-gallery-card img{
width:100%;
height:auto;
}

.movie{width:95%; margin:0 3% 40px 2%;}
.movie iframe{width:100%; border:8px #027ABB solid; box-sizing:border-box;}


#videos{width:100%; position: relative;}
video {display:block;}
#bg-video {width:100%; height:auto; margin:10px 0 10px 0;}
.mesh{position: absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: url(https://blog.oisiso.com/wp-content/uploads/2017/12/mesh.png);
    z-index:100;
}
h3.mottekoi{margin:0!important; padding:0!important; border:none!important; font-size:110%; color:#ffffff; letter-spacing:.2em;
    position: absolute;  left:3%;    top:3%;    z-index:101;}

.mush{text-align:center;}
.mush h1{font-size:400%!important; letter-spacing:-6px; font-weight:bold; margin:0!important; padding:0!important; line-height:1.3em;}



.ifarea{width:90%; margin:0 5% 0 5%;}
.ifarea iframe{width:100%;}

.youtuber{margin:30px;}

.line{margin:50px 0 50px 0; width:100%; position:relative;}
.line img{margin:0 auto 0 auto; width:50%; position:relative; left:25%;}
.line a{background:none;}


body{-webkit-touch-callout:none; -webkit-user-select:none; font-size:100%; color:#555555; margin:0; padding:0; text-align:center;
background-color:#ffffff/*#F5F5F5*/; font-family:Avenir, 'Helvetica neue', Helvetica, '游ゴシック', YuGothic, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, 'ＭＳ Ｐゴシック', sans-serif;
background-image:url(img/bg.png); background-repeat: repeat-y;
background-attachment: fixed;
background-position: center -700px; background-size: 1700px;
}




h1,h2,h3,h4,h5,h6{font-size:100%; margin:0; padding:0; letter-spacing:.5em;}

p,ol,ul{margin:0; padding:0;}

a{color:#336699; text-decoration:none;}
a:visited{color:#336699;}
a:hover{color:#5995C6; text-decoration:underline;}

blockquote{position:relative; width:80%; margin:20px 10% 20px 10%; padding:20px 15px 25px 35px; background-color: #FCF8EB;
border-radius:8px; box-sizing:border-box; line-height:2em;}

blockquote:before{position:absolute; content: ""; width:30px; height:30px; top:5px; left:5px; background-repeat:no-repeat;
background-image:url(blockquote.png);}

blockquote:after {position:absolute; content: ""; width:30px; height:30px; background-repeat:no-repeat;
    bottom:5px; right:5px; background-image:url(blockquote2.png);}

img{border:none;}

h1.logo , p.logo{position:absolute; top:2px; left:3px; }
h1.logo , p.logo{margin:0!important; padding:5px; font-size:70%; font-weight:normal; box-sizing:border-box; color:#ffffff; }
h1.logo a , .logo a{width:100%; padding:0;}

p.logo_m{position:absolute; top:8px; right:5px; margin:0!important; padding:5px; font-size:70%; font-weight:normal; box-sizing:border-box; color:#333333; }
.logo a{width:100%; padding:0;}

p.slogan{position:absolute; top:2px; right:3px; color:#ffffff; box-sizing:border-box; padding:5px; margin:0 0 0 5%!important; font-style:italic; font-size:70%; }

p.slogan_m{position:absolute; top:25px; right:5px; color:#333333; box-sizing:border-box; padding:5px; margin:0 0 0 5%!important; font-style:italic; font-size:70%; }


a{background:linear-gradient(transparent 60%, #e0f2ff 60%);}

.effect span {
  transition: .8s;
} 
.effect div {
  margin: auto;
  transition: .8s;
  transition-delay: 2s;
}

/**********************************************************************block***/
#rap{width:65%;	text-align:left; margin:0 auto 0 auto; padding:0; position:static;}

#header{position:relative; box-sizing:border-box; padding:5px; margin:10px 0 0 0;}

#content{box-sizing:border-box;	padding:5px 0 20px 0; margin:0; width:100%; font-size:100%; letter-spacing:.1em;}

#content ol , #content ul{margin:30px 30px 30px 130px;}
#content ol li , #content ul li{margin:20px 50px 20px 0;}


#content p{margin:15px 15% 15px 15%; line-height:1.8em;}

#content h1{font-size:180%; margin:30px 10px 10px 30px;}
#content h2{font-size:150%; margin:40px 0 10px 120px;}

#content h3{font-size:130%; margin:50px 50px 10px 50px;}

#content h3 a{padding:10px 8px; display:block; text-align:center;
		 -webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px;
			background: rgb(212, 228, 255);
			background: -moz-linear-gradient(117deg, rgb(219, 219, 219) 30%, rgb(239, 239, 239) 70%);
			background: -webkit-linear-gradient(117deg, rgb(219, 219, 219) 30%, rgb(239, 239, 239) 70%);
			background: -o-linear-gradient(117deg, rgb(219, 219, 219) 30%, rgb(239, 239, 239) 70%);
			background: -ms-linear-gradient(117deg, rgb(219, 219, 219) 30%, rgb(239, 239, 239) 70%);
			background: linear-gradient(27deg, rgb(219, 219, 219) 30%, rgb(239, 239, 239) 70%);

opacity:1; transition:0.3s;}

#content h3 a:hover{color:#4E83AF; opacity:.8; text-decoration:none;}



#footer{font-size:80%; margin:20px 0 0 0; padding:10px; text-align:center; letter-spacing:.5em;}
#footer a{color:#4c4c4c;}


/**************************************属性*/

#header img.mn{width:14%; height:auto; margin:0;}
img.resize{width:100%; height:auto; margin:0;} 
/*img.resize{width:95%; height:auto; margin:0 2.5% 0 2.5%;} */

div.fl{box-sizing:border-box; float:left; width:20%; margin:0; padding:10px; text-align:center;}

img.fl{float:left; width:50%; height:auto;}

br.clear{clear:both;}

hr.clear{clear:both; border:none;}

.imgs{width:100%; height:auto;}
.f_imgs{width:40%; height:auto; float:right; margin:10px 20px 10px 15px;}

p.right{text-align:right; font-size:70%;}

#content blockquote ul{margin:30px 15px 30px 30px; font-size:110%;}

#content p.pan{text-align:left; margin:10px 0 0 5px; font-size:80%; color:#666666;}
#content p.pan a{color:#666666;}
#content p.top{text-align:center;}
#content p.small{font-size:90%;	color:#757575;}

div.midashi_box{margin:0 0 20px 0; padding:10px; float:left; width:50%; box-sizing:border-box;}
div.midashi_box h2{margin:0 0 0 30px!important;	padding:0; font-size:150%!important;}

#page-top{display: block;  position: fixed;  z-index:9999;  bottom:15px;  right:15px;  
	padding:20px; background: rgba(89,149,198,.5);  color:#fff;  font-weight:bold;
	text-align:center;  text-decoration:none; border-radius:100px 100px 100px 100px;}

#page-top a{background:none; text-decoration:none; font-size:150%;}




p.navi a {
    border: 1px solid #77A8C6;
    background-color: #e0f2ff;
    background-image: linear-gradient(to bottom, #e0f2ff, #DAE8EF);
    border-radius: 4px;
    color: #466172;
    display: block;
    width:48%;
float:right;
    margin: 20px 1%;
    padding: 10px;
    text-align: center;
    font-size: 120%;
    letter-spacing: 0.2em;
    box-sizing: border-box;
    transition: none 0s ease 0s;
    font-weight: bold;
    text-decoration: none;
}
p.navi a:hover{opacity:.8;}


div.saban{position:relative; width:45%; float:left; margin:0 2.5% 0 2.5%;}

div.saban img{float:left; width:55%; height:auto; margin:0 10px 0 0;}

div.saban span{position:absolute; top:1px; left:3px; font-size:160%; color:#ffffff; font-weight:bold;}

div.saban p{margin:2px 10px 2px 0!important; padding:0; font-size:100%!important; line-height:1.8em; letter-spacing:.1em;}

div.saban h2{margin:2px 10px 2px 0!important; padding:0; font-size:100%!important; line-height:1.8em; letter-spacing:.1em;}

hr.hidden{height:1px; color: transparent; background-color: transparent; border:0; padding:0; margin:45px 0 45px; clear:both;}


div.shimen{position:relative; width:33.3%; float:left; margin:0 0 20px 0; box-sizing:border-box;}
div.shimen img{width:100%; height:auto;}
div.shimen h2{position:absolute; top:2px; left:3px; font-size:120%; color:#ffffff; font-weight:bold; margin:0!important; text-shadow: 1px 1px 3px #000;}

p.next{margin:20px 5% 0 5%!important;}
p.next a{border:1px solid #15AEEC; background-color:#49C0F0; background-image:linear-gradient(to bottom, #49C0F0, #2CAFE3);
	border-radius:4px; color:#FFF; display:block; width:100%; margin:0; padding:10px; text-align:center; font-size:120%; letter-spacing:0.2em;
	box-sizing:border-box; transition:none 0s ease 0s; font-weight:bold; text-shadow:0px 1px 1px rgba(0, 0, 0, 0.3); text-decoration:none;}
p.next a:hover{opacity:.8;}

.heading_box{width:100%; margin:10px 0 35px 0; position:relative;}
.heading_box p{margin:10px!important; font-style:italic;}


.heading_box h1{position:absolute; top:0; left:0; margin:0!important; padding:10px 0 10px 20px; width:100%; font-size:80%; color:#ffffff; /*background-color: rgba(0,51,102,0.1);*/ box-sizing:border-box; 
    text-shadow: 1px 1px 3px #919191;}

.heading_box img{width:100%; height:auto;}


.pager{background:#000000; position:relative; text-align:left;}
.pager h2{font-size:80%;}
.pager h3{font-size:80%; color:#ffffff;}
.pager p{font-size:180%;}



.pager .lefty{position:relative; width:50%; left:0; top:0; box-sizing:border-box; padding:30px 0 30px 90px; color:#ffffff;}
.pager .righty{position:absolute; width:50%; left:50%; top:0; box-sizing:border-box; padding:30px 0 30px 0; color:#ffffff;}



.map{}
.map iframe{width:100%;}
.foots{text-align:center; background:#000000; color:#ffffff; padding:8px; font-size:80%;}




/**************************************メニュー*/
#menu{width:100%; margin:0!important; padding:0;}

#menu li{display:block; float:left; width:14.28%; margin:0!important; padding:0;}

#menu li a{display:block; padding:10px 0 8px 0; background:none; color:#4c4c4c;
text-align:center; text-decoration:none; font-size:80%; letter-spacing:.1em; box-sizing:border-box;
position: relative; z-index: 2; overflow: hidden; transition: .3s; border:transparent 1px solid;}

#menu li a:hover{ border-bottom:1px solid rgba(0,0,0,.1);}

#toggle{display:none;}


/*
a.sample16 {  }
a.sample16
a.sample16:hover { color: #555; }
a.sample16
*/




/**************************************メディアクエリ*/
@media screen and (max-width:600px){

body{background-image:no-image;}
#rap{width:100%; margin:0 auto 20px auto; font-size:110%;}

#content .midashi_box{clear:both;width:100%;font-size:100%;}
#content .midashi_box h2{margin:20px 10px 10px 10px;font-size:120%;}
#content .midashi_box p{margin:10px 10px 10px 30px;}

#content h1{font-size:100%; margin:10px 10px 10px 25px;}

#content h2{font-size:110%; margin:20px 10px 10px 25px; /*border-bottom:.5px #cccccc solid;*/}

#content h3{font-size:110%; margin:60px 20px 10px 20px;}

#content p{font-size:80%; margin:5px 5% 15px 5%; width:90%; box-sizing:border-box;}

.item{width:100%; float:none; margin:50px 0 0 0;}
#content p.pan{text-align:left; margin:0 10px 15px 10px; font-size:60%;}


#menu{display:none; margin:0; /*position:absoluteでメニューがコンテンツを押しやらない*/position:absolute; top:40px; left:0; z-index:2;} 
#menu li{width:100%; margin:0!important;}
#menu li a{border:none; padding:20px 0 20px 0!important; font-size:130%; letter-spacing:-0.1em; background-color: rgba(0,51,102,0.7); color:#ffffff; text-shadow: 1px 1px 3px #cccccc;}
#menu li a:hover{ border-bottom:none;}




#toggle{display:block; position:absolute; width:10%; top:0; left:90%; background:#ffffff; font-size:0.1px;}

#toggle a{display:block; position:relative; padding:20px 0 20px 0; color:#ffffff; text-align:center; text-decoration:none; background-image:none;}

#toggle:before{display:block; content:""; position:absolute; top:50%; left:10px; width:20px; height:20px; margin-top:-10px; background:#8FB8C9;}
#toggle a:before, #toggle a:after{display:block; content:""; position:absolute; top:50%; left:10px; width:20px; height:4px; background:#ffffff;}

#toggle a:before{margin-top:-6px;}
#toggle a:after{margin-top:2px;}


#content ol , #content ul{margin:30px 0 30px 60px;}
#content ol li , #content ul li{margin:20px 20px 20px 0;}

blockquote{margin:50px 20px 50px 30px;}

#content blockquote ul{margin:30px 0 30px 30px;}

div.fl{box-sizing:border-box; float:left; width:50%; margin:0; padding:10px; text-align:center;}


p.slogan{display:none; padding:0; margin:0; height:0;}


p.navi a {
    padding:5px;
    font-size:80%;
    letter-spacing: 0.1em;
    width:80%;
margin:5px 10% 0 10%;
float:none;
}

div.saban{position:relative; width:90%; margin:0 5% 30px 5%;}

div.saban img{float:none; width:100%; height:auto; margin:0 10px 5px 0; border-radius:4px;}

div.saban span{position:absolute; top:-5px; left:3px; font-size:130%; color:#ffffff; font-weight:bold;}
div.saban span.r{color:#4c4c4c;}
div.saban p{margin:0!important; padding:0; font-size:90%!important; width:100%!important;}

div.shimen{width:50%; margin:0;}
div.shimen h2{top:2px; left:3px; font-size:90%!important; border:none!important; letter-spacing:.1em!important;}

hr.hidden{display:none;}

#header{padding:5px; margin:0;}

#header img.mn{width:25%; height:auto; margin:0;}

p.logo_m{position:absolute; top:5px; left:130px; padding:2px; font-size:55%;}

p.slogan_m{position:absolute; top:18px; left:135px; font-size:50%;}

#footer{font-size:70%; margin:10px 0 0 0; padding:0;}

#menu li:first-child a{border-left:none;}

/*
.heading_box{width:100%; margin:10px 0 15px 0;}
*/

.youtuber{margin:20px 0 30px 0; text-align:center;}


.line{margin:50px 5% 50px 5%; width:90%;}
.line img{margin:0 auto 0 auto; width:100%; position:relative; left:0;}

.movie{width:100%; margin:0 0 40px 0;}

.mush h1{font-size:200%!important;letter-spacing:-4px;}



.pager .lefty{padding:30px 0 30px 30px;}
.pager p{font-size:80%;}

.pager a{color:#ffffff; text-decoration:none; background:none;}
}