@charset "UTF-8";

/* Base */

@font-face {
    font-family: 'GENJ4';
    font-style: normal;
    font-weight: 400;
    src: url('../font/GenJyuuGothicX-Regular.eot');
    src: url('../font/GenJyuuGothicX-Regular.eot?#iefix') format('embedded-opentype'),
    url('../font/GenJyuuGothicX-Regular.ttf') format('truetype'),
    url('../font/GenJyuuGothicX-Regular.woff') format('woff');
}
@font-face {
    font-family: 'GENJ7';
    font-style: normal;
    font-weight: 700;
    src: url('../font/GenJyuuGothic-Bold.eot');
    src: url('../font/GenJyuuGothic-Bold.eot?#iefix') format('embedded-opentype'),
    url('../font/GenJyuuGothic-Bold.ttf') format('truetype'),
    url('../font/GenJyuuGothic-Bold.woff') format('woff');
}


@font-face {
    font-family: 'GENJ9';
    font-style: normal;
    font-weight: 900;
    src: url('../font/GenJyuuGothicX-Heavy.eot');
    src: url('../font/GenJyuuGothicX-Heavy.eot?#iefix') format('embedded-opentype'),
    url('../font/GenJyuuGothicX-Heavy.ttf') format('truetype'),
    url('../font/GenJyuuGothicX-Heavy.woff') format('woff');
}

@font-face {
    font-family: 'POMERANIAN';
    font-style: normal;
    font-weight: 400;
    src: url('../font/Pomeranian-Regular.eot');
    src: url('../font/Pomeranian-Regular.eot?#iefix') format('embedded-opentype'),
    url('../font/Pomeranian-Regular.ttf') format('truetype'),
    url('../font/Pomeranian-Regular.woff') format('woff');
}

body{
	margin:0 auto;
	padding:0;
	font: normal normal normal 100%/1 "GENJ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",  "メイリオ", Meiryo, "ＭＳ Ｐゴシック", 'Open Sans', osaka, Arial, Verdana, sans-serif;
	color:#000;
	font-size:100%;
	line-height:100%;
	background-color: #93d3ff;
}


a{
	color:#FF4338;
	text-decoration:none;
	border:0;
}

a:hover{
	color:#656ABB;
	text-decoration:none;
	border:0;
}


img{
	border:0;
}

.p_l{
	margin:0 40px 0 0;
	padding:0;
	float:left;
}

.p_r{
	margin:0 0 0 50px;
	padding:0;
	float:right;
}

.fade_off {
    opacity: 0;
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -o-transition: all 2s;
    -ms-transition: all 2s;
    transition: all 2s;
}

.fade_on {
    opacity: 2;
}

/* Margin Padding Control
------------------------------------------- */

.mt-60{margin-top: -60px; !important;}
.mt20{margin-top: 20px; !important;}
.mt40{margin-top: 40px; !important;}
.mt60{margin-top: 60px; !important;}
.mt80{margin-top: 80px; !important;}
.mt160{margin-top: 160px; !important;}
.mt100{margin-top: 100px; !important;}
.mt200{margin-top: 200px; !important;}
.mb20{margin-bottom: 20px; !important;}
.mb40{margin-bottom: 40px; !important;}
.mb60{margin-bottom: 60px; !important;}
.mb100{margin-bottom: 100px; !important;}
.mtb20{margin-top: 20px; !important; margin-bottom: 20px; !important;}
.mtb40{margin-top: 40px; !important; margin-bottom: 40px; !important;}
.mtb60{margin-top: 60px; !important; margin-bottom: 60px; !important;}
.mtb160{margin-top: 160px; !important; margin-bottom: 160px; !important;}
.pt20{padding-top: 20px; !important;}
.pt40{padding-top: 40px; !important;}
.pt60{padding-top: 60px; !important;}
.pt100{padding-top: 100px; !important;}
.pt130{padding-top: 130px; !important;}
.pt160{padding-top: 160px; !important;}
.pt250{padding-top: 250px; !important;}
.pb20{padding-bottom: 20px; !important;}
.pb40{padding-bottom: 40px; !important;}
.pb60{padding-bottom: 60px; !important;}
.pb130{padding-bottom: 130px; !important;}
.ptb20{padding-top: 20px; !important; padding-bottom: 20px; !important;}
.ptb30{padding-top: 30px; !important; padding-bottom: 30px; !important;}
.ptb40{padding-top: 40px; !important; padding-bottom: 40px; !important;}
.ptb60{padding-top: 60px; !important; padding-bottom: 60px; !important;}
.ptb100{padding-top: 100px; !important; padding-bottom: 100px; !important;}

/* header
------------------------------------------- */

header{
	width: 100vw;
	height: 150px;
	z-index:1;
	overflow: hidden;
	margin-left: auto;
    margin-right: auto;
    text-align: center;
}

header h1{
	margin-left: auto;
    margin-right: auto;
	padding:0;
    text-align: center;
}

header h1 img{
    width: 200px;
    height: auto;
    filter: drop-shadow(2px 2px 2px #FFF);
}

h2{
    font-family: GENJ7;
    text-align: center;
    font-size: 150%;
    color: #000;
    text-shadow: 2px 2px 2px #FFF;
    line-height: 120%;
}
h2 span{
    font-family:'Century Gothic', 'Source Sans Pro', "Arial", 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Osaka', 'メイリオ', 'Meiryo', 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 70%;
}


/* Layput
------------------------------------------- */

div#wrapper{
background: url("../images/common/cloud_sky.jpg") center top repeat-x;
  width: 100vw;
  height: 100vh;
  animation: awan-animasi 40s linear infinite;
  -ms-animation: awan-animasi 40s linear infinite;
  -moz-animation: awan-animasi 40s linear infinite;
  -webkit-animation: awan-animasi 40s linear infinite;
}

section{
	width:100%;
    margin-left: auto;
	margin-right: auto;
	z-index: 500;
}

div.contens{
	width: 1200px;
	margin-left: auto;
	margin-right: auto;
    text-align: center;
    overflow: hidden;
}




/* Photo Control
------------------------------------------- */

ul.photo_list{
    overflow: hidden;
    padding-top: 30px;
    padding-left: 30px;
}

ul.photo_list li{
	vertical-align: top;
    margin-bottom: 70px;
    position: relative;
    float: left;
    margin-right: 80px;
}

ul.photo_list li:nth-child(3n){
    margin-right: 0;
}

ul.photo_list li img{
    width: 330px;
    height: auto;
    border: 5px solid #FFF;
}

ul.photo_list li::after{
    font-family: "Font Awesome 5 Free";
	content: '\f00e';
	font-weight: bold;
    position: absolute;
    top: 8px;
    right: 8px;
    color: #FFF;
    text-shadow: 2px 2px 2px #000;
    font-size: 120%;
}

ul.photo_list li:nth-child(1){
	transform:rotate(5deg); 
}

ul.photo_list li:nth-child(2n){
	transform:rotate(-2deg); 
}

ul.photo_list li:nth-child(3n){
	transform:rotate(3deg); 
}
ul.photo_list li:nth-child(5n){
	transform:rotate(5deg); 
}


ul.photo_list li span{
	width: 330px;
	position: relative;
	padding: 10px;
	background-color: #fff;
	color: 454545;
	display: block;
	border-radius:6px;
	-moz-border-radius: 6px;
  	-webkit-border-radius: 6px;
	margin-top: 15px;
	filter: drop-shadow(0 0 3px rgb(0, 0, 0, 0.8));
    text-align: left;
    line-height: 120%;
}

ul.photo_list li span::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 80px;
  top: -15px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}

ul.photo_list li span::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 80px;
  top: -12px;
  border-right: 15px solid transparent;
  border-bottom: 15px solid #fff;
  border-left: 15px solid transparent;
}




figure {
    margin: 0;
    overflow: hidden;
    position: relative;
    text-align: center;
}

ul.photo_list li a:hover>figure img {
        transform: scale(1.15,1.15);
        -webkit-transform:scale(1.15,1.15);
        -moz-transform:scale(1.15,1.15);
        -ms-transform:scale(1.15,1.15);
        -o-transform:scale(1.15,1.15);
		-webkit-transition:all 0.25s ease-in-out;
	-moz-transition:all 0.25s ease-in-out;
	-o-transition:all 0.25s ease-in-out;
	-ms-transition:all 0.25s ease-in-out;
        transition:all 0.25s ease-in-out;
}
 
ul.photo_list li a:hover>figure {
    opacity: 1;
}





/* Footer
------------------------------------------- */

footer{
	width:100%;
	height:170px;
    background: url("../images/common/footer_bg.png") repeat-x center bottom;
}



p.cprt{
	font-size:80%;
	color:#fff;
	text-align:center;
}