/*
Theme Name:RIKUTO PORTFORIO 
Author:やまもとりくと
Version:0.1
Descripsion:初めてのワードプレステーマ
*/
h1,h2,h3,h3,li,p,dl,dd,dt{
		font-family: "Zen Kaku Gothic New", sans-serif;
}
/* ------------------------
オーバーレイ
------------------------ */
.overlay {
  /* 背景色白 */
  background: #fff;
  /* 位置を固定 */
  position: fixed;
  top: 0;
  /* 全画面表示 */
  width: 100%;
  height: 100%;
  /* 子要素(g-nav)を天地左右の中央に配置 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 不透明度0% */
  opacity: 0;
  /* 自分の横幅分、右に移動 */
  transform: translateX(100%);
  /* 0.3秒かけて変化 */
  transition: all 0.3s;
  /* オーバーレイの重なり順を、mainより上、メニューボタンより下にする */
  z-index: 99;
}

/* ------------------------
クラスshowがつくとオーバーレイ部分が表示される
------------------------ */
.overlay.show {
  /* 不透明度100% */
  opacity: 1;
  /* 移動なし */
  transform: none;
}


img{
	max-width: 100%;
	height: auto;
}
.button{	
	font-weight: inherit;
	border-radius: 3vw;
	width: 20%;
	padding: 1em 2em;
	text-align: center;
}
.button p{
	font-size: 2.5vw;
}


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

/* ------------------------
ハンバーガーアイコン
------------------------ */
/* メニューボタン */
.menu-btn {
	width: 15vw;
	height: 15vw;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url("img/tuki.png");
	background-size: contain;
	/* 位置を固定 */
	position: fixed;
	top: 1vw;
	right: 1vw;
	/* カーソルを指差しマークにする */
	cursor: pointer;
	/* メニューボタンの重なり順を一番上にする */
	z-index: 999;
}
/* 三本線の真ん中 */
.menu-line {
  background: #002B40;
  display: block;
  height: 0.2vw;
  width: 4vw;
  position: relative;
  /* 0.3秒かけて変化 */
  transition: all 0.3s;
	opacity: 0.8;
}
/* 三本線の上下 */
.menu-line::before,
.menu-line::after {
  content: "";
  display: block;
  height: 0.2vw;
  width: 4vw;
  position: absolute;
  /* 0.3秒かけて変化 */
  transition: all 0.3s;
	opacity: 1;
}
/* 三本線の上 */
.menu-line::before {
  top: -1vw;
  background: #002B40;
}
/* 三本線の下 */
.menu-line::after {
  top: 1vw;
  background: #002B40;
}
/* ------------------------
クラスactiveがつくとハンバーガーアイコンが「×」になる
------------------------ */
/* 三本線の真ん中にクラスactiveが付いたとき */
.menu-line.active {
  background: transparent;
}
/* 三本線の上にクラスactiveが付いたとき */
.menu-line.active::before {
  transform: rotate(45deg);
  top: 0;
}
/* 三本線の下にクラスactiveが付いたとき */
.menu-line.active::after {
  transform: rotate(-45deg);
  top: 0;
}
/*menu*/

.menu{
	width: 100%;
	height: 100vh;
	background-image: url("img/menu-img.png");
    background-repeat: no-repeat;
	background-size: cover;
	opacity: 0;
	position: fixed;
	top: 0;
	/* 自分の横幅分、上に移動 */
	transform: translateY(-100%);
	/* 0.3秒かけて変化 */
	transition: all 0.3s;
	z-index: 200;
}
.menu.show{
	opacity: 1;
	transform: none;
}
h2{
	color: #FFFFFF;
	font-size: 50px;
	font-weight: 100;
}
.menu-btns{
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
}
.menu-btns li{
	text-align: center;
	list-style: none;
	margin: 15% 5%;
}
.menu-btns img{
	width: 12vw;
	height: 12vw;
}
.menu-btns h2{
	font-size: 2.5vw;
    text-shadow: #000 2px 0 20px;
}
@media (max-width:1100px){
    .menu-btns{
        flex-wrap: wrap;
        justify-content: space-between;
        height: 70vh;
    }
    .menu-btns li{
        width: 40%;
        height: 5%;
    }
    .menu-btns img{
        width: 18vw;
        height: 18vw;
    }
    .menu-btns h2{
        font-size: 3vw;
    }
}
@media (max-width:820px) {
    .menu-btns{
        flex-wrap: wrap;
        justify-content: space-between;
        height: 70vh;
    }
    .menu-btns li{
        width: 40%;
        height: 20%;
    }
    .menu-btns img{
        width: 23vw;
        height: 23vw;
    }
    .menu-btns h2{
        font-size: 4vw;
		-webkit-text-stroke: 0.2em #002B40;
        paint-order: stroke;
    }
}
@media (max-width:450px){
	.menu-btns {
		display: inline;
	}
	.menu-btns li{
		margin: 0 0 0 30%;
	}
	.menu-btns li:nth-child(1){
		margin-top: 10%;
	}
	.menu-btns img{
		width: 26vw;
		height: 26vw;
	}
}
/*----------------------------------------------------------------------------*/
.menu01{
	opacity: 0;
}
.menu01.show{
	animation: menu-transition 1.5s;
	animation-fill-mode: forwards;
}
.menu-btns01{
	animation: floating-y 3s ease-in-out infinite alternate-reverse;
}
.wrapper01{
	animation: floating-x 7.2s ease-in-out infinite alternate-reverse;
}
.menu-btns01:hover{
	animation: floating-y-f 0.5s ease-in-out infinite alternate-reverse;
}
/*----------------------------------------------------------------------------*/
.menu02{
	opacity: 0;
}
.menu02.show{
	animation: menu-transition 1.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}
.menu-btns02{
	animation: floating-y 3s ease-in-out infinite alternate-reverse;
}
.wrapper02{
	animation: floating-x 6s ease-in-out infinite alternate-reverse;
}
.menu-btns02:hover{
	animation: floating-y-f 0.5s ease-in-out infinite alternate-reverse;
}
/*----------------------------------------------------------------------------*/
.menu03{
	opacity: 0;
}
.menu03.show{
	animation: menu-transition 1.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.6s;
}
.menu-btns03{
	animation: floating-y 5s ease-in-out infinite alternate-reverse;
}
.wrapper03{
	animation: floating-x 4s ease-in-out infinite alternate-reverse;
}
.menu-btns03:hover{
	animation: floating-y-f 0.5s ease-in-out infinite alternate-reverse;
}
/*----------------------------------------------------------------------------*/
.menu04{
	opacity: 0;
}
.menu04.show{
	animation: menu-transition 1.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.9s;
}
.menu-btns04{
	animation: floating-y 7s ease-in-out infinite alternate-reverse;
}
.wrapper04{
	animation: floating-x 5s ease-in-out infinite alternate-reverse;
}
.menu-btns04:hover{
	animation: floating-y-f 0.5s ease-in-out infinite alternate-reverse;
}
/*------------------------------------------------------------------------------*/
@keyframes floating-y {
  0% {
    transform: translateY(-5%);
  }
  100% {
    transform: translateY(5%);
  }
}
@keyframes floating-x {
  0% {
    transform: translateX(-3%);
  }
  100% {
    transform: translateX(3%);
  }
}
@keyframes floating-y-f {
  0% {
    transform: translateY(-15%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes menu-transition {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
/*----------------------------------------------------------------------------------*/


/*-----------*/
/*footer*/
/*--------------*/
footer{
	background-color: #6CB2D3;
    padding: 5vw 0 0;
	width: 100%;
	position: relative;
}


.footerrogo{
	text-align: center;
	opacity: 0;
	transform: scale(0);
	transition: all 0.5s;
		
}
.footerrogo.show{
	opacity: 1;
	transform: scale(1);
}
.footerrogo img{
	width: 40%;
	margin-bottom: 3vw;
}
footer .button{
	background-color: #fff;
	margin: 3vw auto;
	width: 25%;
	transition: all 0.3s;
	opacity: 0;
}
footer .button.show{
	animation: btnani 0.5s;
	animation-fill-mode: forwards;
}
footer .button:hover{
	background-color: #ffa311;
}
footer .button a{
	text-decoration: none;
	color: #002B40;
}
.sns{
	border-top: solid 2px #fff;
	display: flex;
	align-items: flex-end;
	width: 90%;
	margin: 0 auto;
}
.sns ul{
	margin-top: 2vw;
}
.sns li{
	width: 50%;
	height: 50%;
	margin-left: 2vw;
	
}
.sns h3{
	margin-left: auto;
	margin-right: 5vw;
	font-size: 1.5vw;
	color: #fff;
}
.sns ul{
	display: flex;
	list-style: none;
}
.x-rogo{
	display: block;
	width: 3vw;
	height: 3vw;
	margin: auto;
	transform: none;
	transition: transform 0.3s;
}
.x-rogo:hover{
	transform: scale(1.2);
}
.i-rogo{
	display: block;
	width: 3.1vw;
	height: 3.1vw;
	margin: auto;
	transform: none;
	transition: transform 0.3s;
}
.i-rogo:hover{
	transform: scale(1.2);
}
.g-rogo{
	display: block;
	width: 3.3vw;
	height: 3.3vw;
	margin: auto;
	transform: none;
	transition: transform 0.3s;
}
.g-rogo:hover{
	transform: scale(1.2);
}
.mati{
	width: 100%;
	position: fixed;
	bottom: 0;
}
@media (max-width:820px){
	footer{
		padding: 15vw 0 0;
	}
	.footerrogo img{
		width: 55%;
		height: auto;
		padding-bottom: 5vw;
	}
	footer .button{
        width: 45%;
		margin-bottom: 10vw;
    }
}
/*---------*/
/*Top*/
/*-----------*/

section.top{
	background-image: url("img/top-back-img.png");
	background-position: center bottom;
	background-size: cover;
	height: 100vh;
	position: relative;
}

.top_rogo{
	background-repeat: no-repeat;
	width: 50%;
	height: 50%;
	margin-top: 10%;
	margin-left: 15%;
	opacity: 0;
	transition: all 1s;
}
.top_rogo.show{
	opacity: 1;
}
.top_catch{
	margin-top: 7vw;
	margin-left: 15%;
	color: #D9E9E5;
	font-size: 2vw;
	font-weight: 100;
	opacity: 0;
}
.top_catch.show{
	animation: catchani 0.3s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
}
@keyframes catchani{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.top-kumo{
	width: 100%;
	height: auto;
	position: absolute;
	left: 0;
	bottom: -1px;
	transform: translateY(10vw);
	opacity: 0;
	transition: all 1.5s;
}
.top-kumo.show{
	opacity: 1;
	transform: none;
}
.top-stre01{
	position: absolute;
	width: 3vw;
	height: 3vw;
	top: 3vw;
	left: 5vw;
	opacity: 0;
	transform: none;
	transition: all 5s;
}
.top-stre01.show{
	opacity: 1;
	transform: rotate(60deg);
}
.top-stre02{
	position: absolute;
	width: 4vw;
	height: 4vw;
	top: 18vw;
	right: 12vw;
	opacity: 0;
	transform: none;
	transition: all 5s;
}
.top-stre02.show{
	opacity: 1;
	transform: rotate(-100deg);
}
section.work{
	background-color: #F6F2DB;
	padding-top: 5vw;
	padding-bottom: 5vw;
}
.work h1{
	color: #002B40;
	font-size: 4vw;
	font-weight: 700;
	text-align: center;
	opacity: 0;
	transition: all 0.3s;
}
.work h1.show{
	opacity: 1;
	transform: none;
}
.topwork{
	width: 90%;
	margin: 0 auto 5vw;
	display: flex;
	flex-wrap: wrap;
	justify-content:space-between;
}
.topwork-img{
	transform: none;
	transition: 0.3s;
}
.topwork-img:hover{
	transform: scale(1.1);
}
.topwork-content{
	color: #002B40;
	font-size: 1vw;
	margin-top: 0.3vw;
}
.topwork-title{
	color: #002B40;
	font-size: 2vw;
}
.work ul{
	list-style-type: none;
	padding-top: 5vw;
	opacity: 0;
	transform: translateY(5vw);
	transition: all 0.3s;
}
.work ul.show{
	opacity: 1;
	transform: none;
}
.topwork a{
	flex:0 1 45%;
	max-width: 35%;
	margin: 0 5%;
	text-decoration: none;
}
.topwork img{
	width: 100%;
	height: auto;
}
.work .button{
	background-color: #002B40;
	margin: 0 auto;
	opacity: 0;
	transition: all 0.3s;
}
.work .button.show{
	animation: btnani 0.5s;
	animation-fill-mode: forwards;
}
.work .button:hover{
	background-color: #ffa311;
}
@keyframes btnani {
	0%{
		transform: scale(0.5);
		opacity: 0;
	}
	50%{
		transform: scale(1);
		opacity: 1;
	}
	75%{
		transform: scale(1.2);
		opacity: 1;
	}
	100%{
		transform: none;
		opacity: 1;
	}
}
.work .button a{
	text-decoration: none;
	color: #fff;
}

section.about{
	background-color: #002B40;
	padding-top: 5%;
}
.about h1{
	color: #fff;
	font-size: 4vw;
	text-align: center;
	opacity: 0;
	transition: 0.5s;
}
.about h1.show{
	opacity: 1;
}
.profile{
	display: flex;
	width: 90%;
	margin: 0 auto;
	height: 70vh;
}
.mado{
	margin: auto 0 auto 5%;
	width: 40%;
	height: 90%;
	opacity: 0;
	transition: all 0.4s
}
.mado.show{
	opacity: 1;
}
.mado img{
	width: auto;
	height: 100%;
}
.aboutme{
	margin-top: 5%;
	color: #fff;
	width: 45%;
	margin-left: 10%;
}
.mynane{
	display: flex;
	align-items: flex-end;
	position: relative;
	border-bottom: solid 0.1vw #fff;
	height: 10vw;
	color: #fff;
}
@media (max-width:450px){
	.aboutme{
		width: 50%;
		margin-top: 0;
	}
}

/*-------------------------------*/
.aboutme h2{
	font-size: max(3vw,15px);
	padding-top: 1%;
	position: absolute;
	bottom: -8%;
	opacity: 0;
}
.aboutme h2.show{
	animation: eventani 0.5s;
	animation-fill-mode: forwards;
}
.aboutme h3{
	font-size: max(1.2vw,10px);
	font-weight: 100;
	margin-left: 3%;
	position: absolute;
	left: 35%;
	opacity: 0;
}
.aboutme h3.show{
	animation: eventani 0.5s;
	animation-fill-mode: forwards;
}
.aboutme p{
	margin-top: 10%;
	font-size: max(1.5vw,10px);
	line-height: 1.5;
	letter-spacing: 0.1vw;
	opacity: 0;
	animation-fill-mode: forwards;
}
.aboutme p.show{
	animation: eventani 0.5s;
	animation-fill-mode: forwards;
}
@keyframes eventani{
	0%{
	opacity: 0;
	transform: translateY(-10vw);
	transform: translateX(10vw);
	}
	100%{
		opacity: 1;
		transform: none;
	}
}
@media (max-width:450px){
	.aboutme h3{
		margin-left: 7%;
	}
}
/*-----------------------------------*/
.about .button{	
	background-color: #B1C7D4;
	margin: 2% auto 5%;
	opacity: 0;
	transition: all 0.3s;
}
.about .button.show{
	animation: btnani 0.5s;
	animation-fill-mode: forwards;
}
.about .button:hover{
	background-color: #ffa311;
}

.about .button a{
	text-decoration: none;
	color: #002B40;
}
.myskill{
	background-color: #39598c;
	padding: 3vw 0;
}
.skill{
	display: flex;
	width: 80%;
	justify-content: space-between;
	margin: 3vw auto;
}
.myskill h1{
	color: #fff;
	font-size: 4vw;
	text-align: center;
	opacity: 0;
	transition: all 0.5s;
}
.myskill h1.show{
	opacity: 1;
}
.skill h2{
	color: #002B40;
	font-size: max(3vw,15px);
	margin-top: 5%;
	text-align: center;
}
.webdesign{
	background-color: #fff;
	padding: 0 5% 2%;
	width: 40%;
	margin: 0 auto;
	border-radius: 1.5vw;
	opacity: 0;
}
.webdesign.show{
	animation: skillani 0.6s;
	animation-fill-mode: forwards;
}
.webdesign p{
	font-size: 1.2vw;
}
.app{
	font-size: 0.9vw;
	opacity: 0.6;
	margin-top: 3vw;
}
.skill_img{
	width: 25vw;
	height: 25vw;
	margin: auto 0;
}
.webdesign img{
	width: 100%;
	height: 100%;
	margin-top: 2%;
}
.coding{
	background-color: #fff;
	padding: 0 5% 5%;
	width: 40%;
	margin: 0 auto;
	border-radius: 1.5vw;
	opacity: 0;
}
.coding.show{
	animation: skillani 0.6s;
	animation-fill-mode: forwards;
	animation-delay: 0.6s;
}
.coding img{
	width: 25vw;
	height: 25vw;
	margin-top: 2vw;
}
.coding p{
	font-size: 1.2vw;
}
@keyframes skillani{
	0%{
		transform: scale(0);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}
/*-------------------------------------------*/
@media (max-width:1150px){
        section.top{
        height: 75vh;
    }
            .profile{
        height: 60%;
    }
    .top-kumo{
        opacity: 1;
    }
}
@media (max-width:1000px){
        .profile{
        height: 50%;
    }
        .button{
        width: 25%;
        border-radius: 25vw;
    }
}
@media (max-width:820px) {
    section.top{
        height: 50vh;
    }
    .topwork{
        display: block;
    }
	.work h1,.about h1,.myskill h1{
		font-size: 6vw;
	}
    .topwork ul{
        width: 60%;
        margin: 0 auto;
    }
    .topwork-title{
        font-size: 3.5vw;
    }
    .topwork-content{
        font-size: max(2vw,10px);
    }
    .button{
        width: 35%;
        border-radius: 25vw;
    }
	.button p{
		font-size: 3vw;
	}
    .profile{
        height: 30%;
    }
    .top-kumo{
        opacity: 1;
    }
    .skill{
        display: block;
    }
    .webdesign,.coding{
        display: flex;
        width: auto;
        padding: 5%;
        margin-top: 10vw;
    }
    .skill_p{
        margin-left: 5vw;
        width: 60%;
    }
    .skill_p p{
        font-size: max(1.8vw,10px);
    }
}
@media (max-width:450px){
	section.top{
        height: 35vh;
    }
	.top_rogo{
		width: 60%;
	}
	.top_catch{
		margin-top: 5vw;
		font-size: max(2.5vw,10px);
	}
	.about .button{
		margin-top: 5%;
	}
}
/*------------*/
/*Abouto*/
/*--------------*/
.Profile{
	width: 100%;
	height: 100vh;
	background-color: #002B40;
	background-image: url("img/Profile-img.png");
	background-size: cover;
	background-position: top center;
}
.Profile h1{
	color: #fff;
	font-size: 4vw;
	padding-top: 1vw;
	text-align: center;
	opacity: 0;
	transition: all 0.2s;
}
.Profile h1.show{
	opacity: 1;
}
.profile-area{
	width: 90%;
	margin: 10% auto 0;
	opacity: 0;
	transition: all 1.5s;
}
.profile-area.show{
	opacity: 1;
}
.porfile-bac{
	background-color:rgba(100,100,100,0.4);
	border-radius: 2vw;
	margin-left: 50%;
	padding-left: 5%;
	padding-top: 2%;
	padding-bottom: 2%;
}
.profile-name{
	display: flex;
	align-items: flex-end;
}
.profile-area h2{
	font-size: 2.5vw;
	color: #fff;
}
.profile-roma{
	font-size: 1.5vw;
	color: #fff;;
	margin-left: 2vw;
	margin-bottom: 0.3vw;
	font-weight: 200;
}
.profile-y{
	font-size: 1vw;
	color: #fff;
	margin-top: 0.5vw;
	font-weight: 200;
}
.profile-area ul{
	margin-top: 2vw;
}
.profile-area li{
	color: #fff;
	font-size: 1.2vw;
	margin-top: 1vw;
	letter-spacing: 0.05vw;
}
ul .prafile-app{
	list-style: none;
	color: #fff;
	font-size: 0.9vw;
	margin-top: 0.4vw;
}
.profile-area p{
	width: 40%;
	color: #fff;
}
.myhistory{
	background-color: #002B40;
}
.myhistory h1{
	color: #FFFFFF;
	font-size: 4vw;
	padding: 5vw 0 3vw;
	text-align: center;
	font-weight: 300;
	opacity: 0;
	transition: all 0.3s;
}
.myhistory h1.show{
	opacity: 1;
}
.myhistory_myhistory{
	width: 60%;
	margin: 0 auto;
	padding-top: 3vw;
	display: flex;
}
.myhistory_myhistory ul{
	list-style: none;
	text-align: center;
	opacity: 0;
	transition: all 0.3s;
}
.myhistory_myhistory ul.show{
	opacity: 1;
}
.myhistory_myhistory li:nth-child(2){
	color: #fff;
	font-size: 20px;
}
.myhistory_myhistory ul img{
	width: 3vw;
	height: 3vw;
}
.Western p{
	font-size: 1.5vw;
	margin-top: 1vw;
}
.senn{
	width: 2%;
	height: 200px;
	background-color: #fff;
	margin: 20px auto;
}
.event{
	width: 80%;
	margin: 0 auto;
}
/*-------------------------------------*/
.event h2{
	font-size: 2.5vw;
	opacity: 0;
}
.event h2.show{
	animation: eventani 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}
.event p{
	margin-left: 5%;
	margin-top: 2.5vw;
	color: #fff;
	font-size: 1.3vw;
	line-height: 1.9vw;
	letter-spacing: 0.08vw;
	opacity: 0;
}
.event p.show{
	animation: eventani 0.5s;
	animation-fill-mode: forwards;
	animation-delay: 0.5s;
}
@keyframes eventani{
	0%{
	opacity: 0;
	transform: translateY(-10vw);
	transform: translateX(10vw);
	}
	100%{
		opacity: 1;
		transform: none;
	}
}
/*-------------------------------------*/
.myhistory img{
	vertical-align:bottom;
	width: 100%;
	position:relative;
	top: 5px;
}
.likes{
	background-color: #F6F2DB;
	padding: 10vw 0;
}
.likes h1{
	color: #002B40;
	font-size: 4vw;
	padding: 5vw 0px;
	text-align: center;
	font-weight: 300;
    opacity: 0;
    transition: all 0.3s;
}
.likes h1.show{
    opacity: 1;
}
.likes ul{
	display: flex;
	width: 90%;
	margin: 0 auto;
}
.likes li{
	height: 30vw;
	width: 25%;
	background-color: aqua;
	list-style: none;
	border: solid black;
}
/*----------------------------------------------*/
.likesimg01{
	opacity: 0;
}
.likesimg01.show{
	animation: likesani 0.3s;
	animation-fill-mode: forwards;
}
.likesimg02{
	opacity: 0;
}
.likesimg02.show{
	animation: likesani 0.3s;
	animation-fill-mode: forwards;
	animation-delay: 0.3s;
}
.likesimg03{
	opacity: 0;
}
.likesimg03.show{
	animation: likesani 0.3s;
	animation-fill-mode: forwards;
	animation-delay: 0.6s;

}
.likesimg04{
	opacity: 0;
}
.likesimg04.show{
	animation: likesani 0.3s;
	animation-fill-mode: forwards;
	animation-delay: 0.9s;
}
@keyframes likesani {
	0%{
		opacity: 0;
		transform: translateY(10vw)
	}
	100%{
		opacity: 1;
		transform: none;
	}
}
@media(max-width:1200px){
    .profile-area{
        margin: 20% auto 0;
    }
    .profile-area h2 {
    font-size: 3vw;
}  
    .profile-y {
    font-size: 1.5vw;
    }
    .profile-area li{
        font-size: 1.3vw;
    }
    .senn{
        height: 15vw;
    }
    .event h2 {
        font-size: 2.6vw;
    }
    .event p {
    font-size: 1.4vw;
    line-height: 2.3vw;
    letter-spacing: 0.15vw;
    }
}
@media(max-width:1000px){
    .profile-area{
        margin: 25% auto 0;
    }
    .profile-area h2 {
    font-size: 3.5vw;
}  
    .profile-y {
    font-size: 2vw;
    }
    .profile-area li{
        font-size: 1.6vw;
    }
    .event h2 {
        font-size: 2.8vw;
    }
    .event p {
    font-size: 1.7vw;
    line-height: 2.3vw;
    letter-spacing: 0.15vw;
    }
}
@media(max-width:850px){
    .Profile{
        height: 90vw;
    }
    .Profile h1 {
        padding-top: 3vw;
    }
    .senn{
        height: 12vw;
    }
    .event h2 {
        font-size: 3vw;
    }
    .event p {
        font-size: 1.7vw;
        line-height: 2.3vw;
        letter-spacing: 0.15vw;
    }
}
@media(max-width:450px){
	.senn{
        height: 18vw;
		margin: 3vw auto;
    }
	.myhistory_myhistory ul img{
		width: 5vw;
		height: 5vw;
	}
	.Western p{
		margin-top: 3vw;
	}
	.event p {
		font-size: 2vw;
	}
	.event {
		margin-top: 4vw;
	}
}
/*------------------------------------------------------*/
/*---------*/
/*Work*/
/*-----------*/
.Work{
	background-color: #F6F2DB;
	padding-bottom: 7vw;
}
.Work h1{
	color: #002B40;
	font-size: 4vw;
	padding: 5vw 0 3vw;
	text-align: center;
	font-weight: 600;
	opacity: 0;
	transition: all 0.3s;
}
.Work h1.show{
	opacity: 1;
}
.Works{
	display: flex;
	margin: 0 auto;
	flex-wrap: wrap;
	width: 80%;
	width: 90%;
	justify-content: space-between;
}
.Works_Works{
	margin: 5vw 0; 
    width: 45%;
}
.Works_Works a{
	text-decoration: none;
	color: #002B40;
}
.Works_Works ul{
	opacity: 0;
	transform: translateY(5vw);
	transition: all 0.3s;
    margin:0 14%;
}
.Works_Works ul.show{
	opacity: 1;
	transform: none;
}
.Works_Works-img{
	transform: none;
	transition: 0.3s;
}
.Works_Works-img:hover{
	transform: scale(1.1);
}

.Works_Works li{
	list-style: none;
}
.Works-content{
	color: #002B40;
	font-size: 1.3vw;
}
.Works-title{
	color: #002B40;
	font-size: 2.3vw;
}
/*------------------------------------*/
@media(max-width:820px){
    .Work h1{
        font-size: 5vw;
    }
    .Works{
        display: block;
    }
    .Works_Works{
        width: 80%;
        margin: 5vw auto;
        padding-left: 5%;
    }
    .Works-title{
        font-size: 3.5vw;
    }
    .Works-content{
        font-size: 1.8vw;
    }
    .Works_Works ul{
        margin: 0;
    }
}
/*-----------------------------------------------------*/
/*single*/
/*-----------------------------------------------------*/
.single{
	background-color: #002B40;
	height: 130vh;
	position: relative;
}
.single-kumo{
	width: 100%;
	position: absolute;
	left: 0;
    bottom: -1px;
	z-index: 1;
    opacity: 0;
    transform: translateY(10vw);
    transition: all 0.5s;
}
.single-kumo.show{
    opacity: 1;
    transform: none;
}
.single-kumo img{
	vertical-align: bottom;
}
.singlelogo{
    width: 60%;
	margin-left: 5%;
	margin-top: 2%;
    opacity: 0;
    transition: all 1s;
}
.singlelogo.show{
    opacity: 1;
}
.singleexplanation{
	margin-top: 5%;
	margin-left: 5%;
    width: 50%;
    opacity: 0;
    transition: all 0.5s;
}
.singleexplanation.show{
    opacity: 1;
}
.single dt{
	color: #fff;
	font-size: 3vw;
}
.single dd{
	color: #fff;
    font-size: 1.6vw;
	margin-bottom: 7%;
}
.singlegaiyo a{
	text-decoration: none;
	color: #fff;
}
.singletitle p,.single dd{
	font-size: max(1.8vw,8px);
}
.singleexplanation dl:nth-child(1) dt{
	font-size: 4vw;
	font-weight: 550;
}
.singletop{
	display: flex;
	width: 90%;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}
.singlework{
	width: 50%;
}
.singlework img{
	width: 100%;
	height: auto;
	margin-top: 13%;
    transform:translateY(30vw);
    opacity: 0;
    transition: all 0.3s;
}
.singlework.show img{
    transform:none;
    opacity: 1;
}
.single_single{
	background-color: #F6F2DB;
	padding: 5vw 0;
}
.workwhole{
	width: 100%;
	height: auto;
}
.single_single dl{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	padding-top: 50px;
}
.single_single dt{
	color: #002B40;
	font-size: 2vw;
	font-weight: 600;
}
.single_single dd{
	width: 60%;
    color: #002B40;
	margin-right: 10%;
	font-size: 1.2vw;
}
.singlekon{
    opacity: 0;
    transition: all 0.4s;
}
.singlekon.show{
    opacity: 1;
}
.singlemoku{
    opacity: 0;
    transition: all 0.4s;
}
.singlemoku.show{
    opacity: 1;
}
.singletar{
    opacity: 0;
    transition: all 0.4s;
}
.singletar.show{
    opacity: 1;
}
.singlesai{
    opacity: 0;
    transition: all 0.4s;
}
.singlesai.show{
    opacity: 1;
}
.singledeza{
    opacity: 0;
    transition: all 0.4s;
}
.singledeza.show{
    opacity: 1;
}
#target-work{
	display: block;
	text-align: center;
}
#target-work dt{
	font-size: 3vw;
	font-weight: 600;
    opacity: 0;
    transition: all 0.3s;
}
#target-work dt.show{
    opacity: 1;
}
#target-work dd{
	margin: 5vw auto;
	max-width: 100%;
    opacity: 0;
    transform:  all 0.3s;
}
#target-work dd.show{
    opacity: 1;
}
#target-work img{
    opacity: 0;
    transition: all 0.4s;
}
#target-work img.show{
    opacity: 1;
}
.all-works{
	background-color: #F6F2DB;
	padding-top: 3vw;
}
.all-works h1{
	color: #002B40;
	font-size: 4vw;
	text-align: center;
}
.All-Works{
	width: 90%;
	margin: 0 auto;
	padding: 50px 0 100px;
	display: flex;
	flex-wrap: wrap;
}
.All-Works a{
	width: 25%;
	margin-top: 30px;
	transform: none;
	transition: transform 0.3s;
}
.All-Works a:hover{
	transform: scale(1.2);
}
.All-Works img{
	width: 100%;
	height: auto;
}
/*-------------------------------------------------*/
@media (max-width:1500px){
    .single{
        height: 73vw;
    }
}
@media (max-width:1150px){
    .single{
        height: 75vw;
    }
}
@media (max-width:1000px){
        .single{
        height: 80vw;
    }
    .single_single dt{
        font-size: max(3.5vw,15px);
    }
    .single_single dd{
        font-size: max(2vw,12px);
        margin: 0;
    }
        #target-work dt {
        font-size: max(4vw,20px);
    }
    .all-works h1{
        font-size: 6vw;
    }
}
@media (max-width:820px) {

}

/*-----------*/
/*Contact*/
/*------------*/

.contact{
	background-color: #6CB2D3;
	height: 100vh;
	padding-top: 3%;
	position: relative;
}
.mati img{
	position: absolute;
	bottom: 0;
	width: 100vw;
	z-index: 10;
}
.contact-area{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	background: #39598c;
	width: 40%;
	height: 80%;
	transform: translateY(20vw);
	opacity: 0;
	transition: 0.4s;
	z-index: 20;
}
.contact-area.show{
	transform: none;
	opacity: 1;
}
.contact h1{
	color: #fff;
	font-size: 3vw;
	text-align: center;
	padding-top: 1rem;
}
.wpcf7 {
  max-width: 600px;
  margin: 0 auto;
}

.wpcf7-form {
  padding: 1rem 2rem;
}

.wpcf7 label, .wpcf7 input, .wpcf7 textarea {
  font-size: 16px;
}

.wpcf7 label {
  font-weight: bold;
  color: #fff;
}

.wpcf7 label span {
  margin-top: 5px;
  display: block;
}

.wpcf7 input, .wpcf7 textarea {
  width: 100%;
  -webkit-appearance: none;
          appearance: none;
  border-radius: 4px;
  border: none;
  padding: 12px;
  color: #323232;
  font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

.wpcf7 input[type="submit"] {
  max-width: 200px;
  margin: 2% auto 0;
  display: block;
  background: #ffa311;
  color: #fff;
  font-weight: bold;
  transition-property: all;
  transition: 0.2s ease-in;
}

.wpcf7 input[type="submit"]:hover {
  background: #3bbfd7;
}
.wpcf7-form-control{
	background-color: #FFFFFF;
}
@media (max-width:1500px){
    .contact-area{
        width: 45%;
    }
}
@media (max-width:1200px){
    .contact-area{
        width: 50%;
    }
    .contact h1{
        font-size: 3.6vw;
    }
}
@media (max-width:1000px){
    .contact-area{
        width: 55%;
    }
    .contact h1{
        font-size: 3.8vw;
    }
}
@media (max-width:900px){
    .contact-area{
        width: 60%;
    }
    .contact h1{
        font-size: 4vw;
    }
}
@media (max-width:820px){
    .contact-area{
        width: 65%;
        height: 75%;
    }
	.contact h1{
		font-size: 6vw;
	}
}
@media (max-width:450px){
	.wpcf7 input, .wpcf7 textarea {
		padding: 0;
	}
	.contact-area{
		width: 80%;
		height: 83vh;
	}
}
/*-----------------------------------------------------*/
.container.morning {
  background-image: linear-gradient(to bottom, #5e8db7, #b7e3ed 75%, #ffc37b);
}
.container.afternoon {
  background-image: linear-gradient(to bottom, #005591, #2789bb 50%, #47bbd1);
}
.container.evening {
  background-image: linear-gradient(to bottom, #5e3d87, #e5679a 80%, #f67259);
}
.container.night {
  background-image: linear-gradient(to bottom, #0e2630, #00273e 50%, #083a59);
}