@charset "UTF-8";


/*========================================================
ipad,pc
========================================================*/
/* ページ全体 */
html,body{
 height : 100%;
}

body{
 background-color : #ffffff;
 font-family : "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ",sans-serif; 
}


	/* レイアウト
	======================== */
	#header{
	 max-width: 960px;
	 margin-right : auto;
	 margin-left : auto;
	}

	#wrapper{
	 max-width: 960px;
	 margin-right : auto;
	 margin-left : auto;
	}

	/* top雲 */
	/*img.back{
		position: relative;	
	}*/


	img.kumo{
		position : absolute;	
		z-index : 10;
		display : inline-block;
		width : 56%;
		top : 150px ;
		left : 24%;	
		animation-name: floating;/*アニメーション*/
	-webkit-animation-name: floating;

	animation-duration: 12s;	
	-webkit-animation-duration: 12s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	}


@keyframes floating {
	0% {
		transform: translateY(0%);	
	}
	50% {
		transform: translateY(8%);	
	}	
	100% {
		transform: translateY(0%);
	}			
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);	
	}
	50% {
		-webkit-transform: translateY(8%);	
	}	
	100% {
		-webkit-transform: translateY(0%);
	}			
}


	/* 見出し */
	h1{
		background-color : white;
		font-size : 3rem;
		font-family: 'Niconne', cursive;
		text-align : left;
		margin-top : 20px;
		margin-bottom : 20px;
		float : left;
	/* position : absorute;
		top : -100px; */
	}

	h2{
		font-size : 6rem;
		font-family: 'Niconne', cursive;
		text-align : center;
		margin-top : 80px;
		margin-bottom : 20px;
	}

	h3{
		font-size : 2.5rem;
		font-family: 'Fira Sans', sans-serif;
		margin-top : 60px;
		margin-bottom : 20px;
	}

	h4{
		font-size : 2.2rem;
		font-family : "Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ",sans-serif;
		line-height : 1.5;
		margin-top : 40px;
		margin-bottom : 40px;
	}

	h5{
		font-size : 2.5rem;
		font-family : "Yu Gothic","YuGothic","Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ",sans-serif;
		line-height : 1.5;
		margin-top : 40px;
		margin-bottom : 40px;
	}

	.komidasi_s{
	 font-size :1.2rem;
	 font-family : "Hiragino Kaku Gothic ProN","ヒラギノ角ゴ ProN W3","Meiryo","メイリオ",sans-serif; 
	 font-weight : nomal;
	 vertical-align : middle;
	}

	.chachword > h2{
		position: absolute;
		z-index: 20;
		top: 300px;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		font-size: 2.8rem;
		line-height: 1.8;
		text-align: center;	
	}

/*--雲の中の文字のアニメーション---*/
.fuwatAnime {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:3s;
 -ms-animation-duration:3s;
 animation-duration:3s;
 -webkit-animation-name: fuwatAnime;
 -ms-animation-name: fuwatAnime;
 animation-name: fuwatAnime;
 visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}


div > p > img.sun{
	width: 40px;
	height: auto;
}

	/* グローバルナビ
	======================== */

	#gnav{
		margin-top : 60px;
	 /*width : 710px;*/
	}

	#gnav ul{
	 overflow : hidden;

	}
	#gnav ul > li{
	 float : right;
	 font : 1.8rem;
	 padding-left : 30px;
	}


	/* リンク
	＝＝＝＝＝＝＝＝＝＝＝ */
	a:link{
	 color : black;
	 text-decoration : none;
	 }
	a:visited{
	 color : black; 
	 }
	a:hover{
	/* font-size : 1.8rem; */
	 color : silver;
	 text-decoration : underline;
	}

	/* フッター
	＝＝＝＝＝＝＝＝＝＝＝ */
	footer{
	   clear : left;
	   background-color : #eeeeee;
	   width : 100%;
	}

	#footbox{
	 max-width : 960px;
	 margin-right : auto;
	 margin-left : auto;
	}

	/* ローカルナビ */
	#lnav ul{
	 overflow : hidden;
	}
	#lnav ul li{
	 float : left;
	 font : 1.5rem;
	 padding-right : 20px;
	 padding-top : 40px;
	 padding-bottom : 10px; 
	}

	#footbox p{
	 text-align : right;
	 padding-bottom : 30px;
	}

	/* 動き */
	.rotate15:hover{
	 -webkit-transform: rotate(10deg);
	 transform: rotate(10deg);
	}

	/* 配置 */
	.left{
	text-align : left;
	}
	.center{
	text-align : center;
	}
	.right{
	text-align : right;
	}


	/* アキの指定 */
	.m_top{
	 margin-top : 30px;
	}
	.m_top60{
	 margin-top : 60px;
	}
	.m_right{
	 margin-right : 30px;
	}

	.m_bottom20{
	 margin-bottom : 20px;
	}

	/* fboxの指定 */
	.fbox{
	float : left;
	margin-right : 30px;
	}

	/* floatの指定 */
	.f_left{
	float : left;
	}

	.f_right{
	float : right;
	}

	.f_clear{
	clear : both;
	}

	.clearfix:after {
	  display: block;
	  clear: both;
	  content: "";
	}

	p.honbun1{
	 margin-top : 20px;
	 margin-bottom : 20px;
	 }

	p.honbun2{
	 margin-top : 50px;
	 padding-bottom : 20px;
	 border-bottom : solid 1px black;
	 margin-bottom : 60px;
	 font-size: 1.2rem;
	}

	a.page-top{
	 position : fixed;
	 bottom : 100px;
	 right : 20px;
	 font-size : 2rem;
	 font-family : fontawesom;
	 padding : 12px 8px 8px;
	 background-color : #666666;
	 opacity : 0.5;
		
	display: block;
    border-radius: 25px;
    width: 50px;
    height: 50px;
    color: #fff;
    text-decoration: none;
    text-align: center;	
	box-sizing: border-box;
	}

	//プルダウングローバルナビ

	/*div.gnav{
		top: 60px;	
	}*/

	.gnav.forpc ul{
		list-style-type: none;
		margin: 0;
		padding: 0;
		color: #000;
	}
	.gnav.forpc ul#menu>li{
		top: 60px;	
		float: right;
		position: relative;
		margin: 0;
		padding: 0;
		width: 115px;
		/*background-color: #F57F7F;*/
		text-align: center;
		display: block;
		line-height: 1;
		font-size: 1.6rem;

	}
	.gnav.forpc ul.child{
		display: none;
		position: absolute;
	   /*margin-left: -5px;*/
		padding: 0;
	}
	.gnav.forpc ul.child li a{
		clear:right;
		padding: 10px;
		margin: 0;
		display: block;
		background-color: #fff;
		color: #000;
		text-align: center;
		border-bottom: 1px solid #ccc;
		font-size: 1.2rem;
	}

	.gnav.forpc ul.child li a:hover{
		color: #ccc;
	}

	/*ul.child li a:nth-child(1){
		margin-top: -50px;
		}*/
	/*ul.child li a:nth-child(2){
		margin-top: -50px;
		}*/


	.gnav.forpc li a:hover{
		color: #ccc;
	}


/*=========================================================
PCのみ
========================================================= */
@media screen and (min-width: 768px) {
	.forMobile{
		display: none;
	}
}


/*=========================================================
スマホ
========================================================= */
@media screen and (max-width: 767px) {
	#header > img{
		width: 20%;
		height: auto;
		margin: 2%;
	}
	#header > a > img{
		width: 20%;
		height: auto;
		margin: 2%;
	}
	
	img.kumo{
	position : absolute;	
	z-index : 10;
	display : inline-block;
	width : 85%;
	top : 24vw ;
	left : 11%;	
	}
	.forMobile{
		display: block;
	}
	
	.forpc{
		display: none;
	}	
	
	.chachword h2{
		position: absolute;
		z-index: 15;
		top: 44vw;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		font-size: 1.4rem;
		line-height: 1.7;
		text-align: center;
	}
	.oomidasi{
		margin-top: 35px;
		margin-bottom: 10px;
	}
	h3{
		margin-top: 30px;
	}
	
	#wrapper{
		width : 96%;
	}
	table.profile tr th ,
	table.profile tr td {
		display: block;
		text-align: center;
	}
	table.profile tr th{
		background-color:#ededed; 
	}
	
	 /*カテゴリーの写真*/
	.fbox > a > img.rotate15 ,
	.f_left > a > img.rotate15 ,
	.fbox > img ,
	.f_left > img {
		width : 100%;
		height: auto;
		margin : 5px 0;
	}
	.m_top {
    margin-top: 0;
	}
	.fbox , f_left{
		float: none;
		margin: 0;
	}
	
	 /*プロフィールの写真*/
	img.fbox{
		display: block;
    	margin: 0 auto;
		margin-bottom: 20px;
	}
	.spwrap{
		margin: 0 25px;
	}
	table.profile {
		width : 100%;
	}
	
	/* ローカルナビ */
	#lnav{
		margin-top: 20px;		
	}

	#lnav ul{
		display: inline-block;
		margin: 0 20px ;
	}
	#lnav ul li{
	 float : left;
	 font : 1.3rem;
	 padding: 40px 10px 20px;
	}
	#footbox p{
	 	text-align : center;
	 	padding-bottom : 30px;
	}
	
	 /*mobileグローバルナビ用*/
    nav.globalMenuSp {
        position: fixed;
        z-index: 20;
        top: 0;
        right: 0;
        background: #fff;
        color: #000;
        text-align: center;
        transform: translateX(200%);
        transition: all 0.6s;
        width: 80%;
	/*	border-top: 2px solid #105735;*/
    }
 
    nav.globalMenuSp ul {
        background: #e1e2e1;
        margin: 0 auto;
        padding: 20px 0 0 0;
    	width: 100%;
    }
 
    nav.globalMenuSp > ul > li {
        font-size: 2rem;
        list-style-type: none;
        padding: 0;
        width: 100%;
		line-height: 0.8;
        border-bottom: 3px dotted #fff;
    }
	
	nav.globalMenuSp > ul > li > ul.child{
        font-size: 1.1rem;
        list-style-type: none;
        padding: 0;
        width: 100%;

    }
	nav.globalMenuSp > ul > li > ul.child > li {
        line-height: 0.5;

    }
	
	
	
	
 
/* 最後は色違いライン */
    nav.globalMenuSp ul li:last-child {
        padding-bottom: 0;
        border-bottom: none;
    }
 
    nav.globalMenuSp ul li a {
        display: block;
        color: #000;
        padding: 1.2em 0;
    }
 
    /* このクラスを、jQueryで付与・削除する */
    nav.globalMenuSp.active {
        transform: translateX(0%);
    }

    /*ハンバーガーメニュー,３本線用*/    
    .navToggle {
        display: block;
		position: fixed;    /* bodyに対しての絶対位置指定 */
		right: 5px;
		top: 5px;
        width: 50px;
        height: 45px;
        cursor: pointer;
        z-index: 30;
        /*background: #666;*/
        text-align: center;
      /*  position: relative;*/
      /*  margin: 0 38vw;*/
    }
 
    .navToggle span {
        display: block;
        position: absolute;    /* .navToggleに対して */
        width: 30px;
        border-bottom: solid 2px #333;
        -webkit-transition: .35s ease-in-out;
        -moz-transition: .35s ease-in-out;
        transition: .35s ease-in-out;
        left: 6px;

    }
 
    .navToggle span:nth-child(1) {
        top: 9px;
    }
 
    .navToggle span:nth-child(2) {
        top: 18px;
    }
 
    .navToggle span:nth-child(3) {
        top: 27px;
    }
 
    .navToggle span:nth-child(4) {
        border: none;
        color: #333;
        font-size: 11px;
        font-weight: bold;
        top: 30px;
      /*  top: 9px;*/
      /*  left:35px;*/
      /*  left:80%;*/
    }
    /*ハンバーガーメニュー用タップした後にX*/ 
    /* 最初のspanをマイナス45度に */
    .navToggle.active span:nth-child(1) {
        top: 18px;
        left: 6px;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
 
/* 2番目と3番目のspanを45度に */
    .navToggle.active span:nth-child(2),
    .navToggle.active span:nth-child(3) {
        top: 18px;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
    }
    #globalMenuBack {
        margin-top: 2px;
		margin-bottom: 10px;
    }
    
    #globalMenu li {
        width: 100px;
    }
	
	
	
	
}