@charset "utf-8";
/* CSS Document */

html {
	scroll-behavior: smooth;
}

body {
	font-family:"メイリオ","Meiryo","ＭＳ ゴシック","ＭＳ Ｐ明朝",sans-serif;
	line-height:1.5;
	color:#4e4e4e;
}


* {
	margin:0;
	padding:0;
}



img {
	border:none;
	vertical-align:bottom;
}


a {
	text-decoration:none;
}


li {
	list-style-type:none;
}

/*ここからスマホの設定*/

#wrapper {
	width:100%;
	margin:0 auto;
	overflow: hidden;
	position: relative;
}


/*ここからヘッダー*/

header {
	width:100%;
	padding:20px 10px 0 10px;
	box-sizing: border-box;
	background-color:#ded1b2;
}

#h1_img {
	width:30%;
	float: left;
/*	background-color:#0F5F3E;*/
}

#h1_img h1 img {
	width:100%;
}


nav {
	width: 55%;
	height: 100vh;
	background-color: rgba(78,78,78,0.7);
	position:fixed;
	top:0;
	left:100%;
	z-index: 4;
	padding-top:4em;
	transition: .5s;
/*	background-color:#0F175F;*/	
}

nav ul li#nav_top {
	margin:10px auto 0 auto;
	Width:25%;
	box-sizing: border-box;
/*	float:left;*/
}

nav ul li#nav_works {
	margin:10px auto 0 auto;
	Width:40%;
	box-sizing: border-box;
/*	float:left;*/
}

nav ul li#nav_profile {
	margin:10px auto 0 auto;
	Width:40%;
	box-sizing: border-box;
/*	float:left;*/
}

nav ul li img {
	width: 100%;
}


/*ハンバーガーメニュー部分*/
#nav_btn {
	display: block;
	width: 40px;
	height: 40px;
	background-image: url("../images/common/menu_btn.svg");
	position: fixed;
	top: 15px;
	right: 15px;
	z-index: 5;
}

#nav_tab {
	display: none;
}

#nav_tab:checked+label>#nav_btn {
	background-image: url("../images/common/menu_btn_close.svg");
}

#nav_tab:checked~nav{
	left: 45%;
}

/*ハンバーガーメニュー部分ここまで*/



/*ここからメイン*/

#main {
	width:100%;
	margin:0 auto;
	position:relative;
	background-color:#fff;
}

#nami1 {
	width:100%;
	height:30px;
	margin:0 auto;
	position:absolute;
	z-index:2;
	background-image:url(../images/common/nami_bottom.svg);
	background-repeat:repeat-x;
}


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

/*ここまでメイン*/


/*ここからfooter部分*/

footer {
	width:100%;
	height:50px;
	padding-top:10px;
	position:relative;
	z-index:0;
	box-sizing: border-box;
	background-color: #ded1b2;
/*	background-color: #0A780F;*/
}

#nami4 {
	width:100%;
	height:30px;
	margin:0 auto;
	position:absolute;
	z-index:2;
	top:-25px;
	background-image:url(../images/common/nami_top.svg);
	background-repeat:repeat-x;
}

footer p {
	text-align: center;
}

/*ここまでスマホ設定*/





/*●●●●●●●●●●ここからタブレット・ｐｃ設定●●●●●●●●●●*/

@media screen and (min-width:768px) {

/*タブレット・PC・ヘッダー内タイトル設定ここから*/
header {
	width:100%;
	height:100px;
	margin:0 auto;
	padding-top:30px;
	background-color:#ded1b2;
}

#h1_img {
	width:123px;
	height: 55px;
	margin-left: 50px;
	float: left;
/*	background-color:#0F5F3E;*/	
}
/*タブレット・PC・ヘッダー内タイトル設定ここまで*/
	
	
/*タブレット・PC・ヘッダーナビ部分*/
	
nav {
	width: 450px;
	margin-top:5px; 
	float:right;
	height: 0;
	display: block;
	position:relative;
	top:0;
	left: 0;
	padding-top:0;
	box-sizing: border-box;
/*	background-color:#0F175F;*/
}
	
#nav_btn {
	display: none;
}
	
nav ul {
	padding-left:0;
	overflow:hidden;
	box-sizing: border-box;
}

nav ul li#nav_top {
	margin-top: 0;
	margin-right:40px;
	width:70px;
	box-sizing: border-box;
	float:left;
}

nav ul li#nav_works {
	margin-top: 0;
	margin-right:40px;
	width:103px;
	box-sizing: border-box;
	float:left;
}

nav ul li#nav_profile {
	margin-top: 0;
	width:115px;
	box-sizing: border-box;
	float:left;
}

nav ul li a {
	display:block;
	height:0;
	padding-top:45px;
}

nav ul li#nav_top a {
	margin:0;
	background-image:url(../images/common/top_pc.svg);
	background-repeat:no-repeat;
}

nav ul li#nav_works a {
	background-image:url(../images/common/works_pc.svg);
	background-repeat:no-repeat;
}

nav ul li#nav_profile a {
	background-image:url(../images/common/profile_pc.svg);
	background-repeat:no-repeat;
}

nav ul li a:hover {
	background-position:0 -45px;
}

/*タブレット・PC・ヘッダーナビ部分ここまで*/

/*タブレット・PC・トップ(タイトル)部分ここから*/

#title_area {
	width:60%;
	height:250px;
	margin:0 auto;
  	border-radius: 0 0 20px 20px;
	background-color:#d9b364;
}
/*タブレット・PC・タイトルペンギン部分*/
#pg_img {
	width:30%;
	height:250px;
	float:left;
/*	background-color:#C90;*/
}

#pg_img img {
	display:block;
	margin:0 auto;
	min-width:80%;
	max-height:240px;
}

/*タブレット・PC・タイトルイメージ部分*/
#title {
	width:70%;
	height:250px;
	float:right;
/*	background-color:#C6F;*/
}

#title img {
	display:block;
	margin:0 auto;
	width:100%;
	max-height:190px;
}
/*タブレット・PC・トップ(タイトル)部分ここまで*/

	
}
/*●●●●●●●●●●ここまでタブレット・ｐｃ設定●●●●●●●●●●*/



/*■■■■■■■■■■■ここからｐｃ設定■■■■■■■■■■*/
@media screen and (min-width:950px) {


}
/*■■■■■■■■■■■ここまでｐｃ設定■■■■■■■■■■*/