@charset "utf-8";
* {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	overflow-x: hidden;
}
/* ▼モバイルファースト (全環境に共通のデザイン) */
.pcOnly {
	display: none;
}
.spOnly {
	display: block;
}
body {
	min-height: 100%;
	line-height: 1.7;
	font-family: "FGミディアム半角", "筑紫A丸ゴシック ボールド", "筑紫B丸ゴシック ボールド", "筑紫A丸ゴシック レギュラー", "筑紫B丸ゴシック レギュラー", "YuGothic", "Yu Gothic medium", "Hiragino Sans", "Meiryo", "sans-serif";
	font-size: 1.6rem;
	color: #204d6a;
	background-color: #eef2f4;
}
.grid h2, p {
	font-family: 'Noto Sans JP', "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	-ms-interpolation-mode: bicubic;
}
a {
	color: #204d6a;
	text-decoration: none;
}
a:link {
	color: #204d6a;
	text-decoration: none;
}
a:hover {
	color: #ff8212;
}
a:hover {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .20s;
	transition: all .20s;
}
/*▼前後関係=================================*/
.cpCont, .twitter, .instagram, .mail, .pageTop {
	z-index: 1234;
}
/*▼以下bg装飾===============================*/
.deco01 {
	height: 100%;
}
.deco01::after, .deco01::before, .deco02::after, .deco02::before {
	position: fixed;
	content: "";
	display: inline-block;
	pointer-events: none;
	z-index: 1234;
}
.deco01::before {
	width: 100%;
	height: calc(100% - 5.333vw);
	top: 2.666vw;
	left: 0;
	border-top: solid 2px #09597c;
	border-bottom: solid 2px #09597c;
}
.deco01::after {
	top: 0;
	right: 2.666vw;
	height: 100%;
	width: calc(100% - 5.933vw);
	border-right: solid 2px #09597c;
	border-left: solid 2px #09597c;
}
/*▼animationSet=============================================*/

@keyframes scroleDown {
	to {
		opacity: 1;
		transform: translate3d(0, -30px, 0);
	}
}
@keyframes ufo {
	100% {
		transform: translate3d(0, -5px, 0);
	}
	70% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	20% {
		transform: translate3d(0, 0, 0) rotate(-10deg);
	}
	10% {
		transform: translate3d(0, 0, 0) rotate(10deg);
	}
	0% {
		transform: translate3d(0, 0, 0);
	}
}
@keyframes current {
	100% {
		transform: translate3d(0, 5px, 0);
	}
	70% {
		transform: translate3d(0, 0, 0) rotate(0deg);
	}
	20% {
		transform: translate3d(0, 0, 0) rotate(-10deg);
	}
	10% {
		transform: translate3d(0, 0, 0) rotate(10deg);
	}
	0% {
		transform: translate3d(0, 0, 0);
	}
}
@keyframes bouncingLoader04 {
	from {
		transform: translate3d(0, 2px, 0) rotate(40deg);
	}
}
@keyframes bouncingLoader05 {
	from {
		transform: translate3d(-2px, 0, 0);
	}
}
@keyframes bouncingLoader06 {
	from {
		transform: translate3d(0, -10px, 0);
	}
}
/*▼svgAdjustment=============================================*/
.menuSvg path {
	fill: #eef2f4;
	stroke: #eef2f4;
	stroke-dasharray: 2000;
	stroke-dashoffset: 0;
	stroke-width: 1;
	-webkit-animation: hello 1s ease-in 0s;
	animation: hello 1s ease-in 0s;
}
h1 {
	position: absolute;
	margin: 10px 0 -6px 15px;
	width: 58px;
}
/*▼humburgerMenu================================*/
.cpCont {
	position: relative;
}
.hamburger {
	width: 60px;
	height: 60px;
	position: fixed;
	top: 2.666vw;
	right: 2.666vw;
}
.hamburger .checkedMenu {
	position: absolute;
	background-color: rgba(238, 242, 244, 0.9);
	top: 0;
	right: calc(-100vw - 2.666vw);
	min-width: 100.5vw;
	-webkit-transition: 0.3s transform;
	transition: 0.3s transform;
	-webkit-transition-timing-function: cubic-bezier(.38, .52, .10, .99);
	transition-timing-function: cubic-bezier(.38, .52, .10, .99);
}
.hamburger .checkedMenu h2 {
	text-align: center;
	margin: 35px 0 10px 0;
}
.hamburger .checkedMenu h2 img {
	width: 130px;
}
.hamburger .checkedMenu>ul {
	width: calc(100% - 52px);
	height: 100%;
	margin: auto;
	padding-top: 25px;
	border-radius: 5px;
}
.hamburger .checkedMenu>ul li {
	max-width: 800px;
	margin: 0 auto 15px;
	list-style: none;
	position: relative;
}
.hamburger .checkedMenu ul li a {
	width: 100%;
	height: 100%;
	display: inline-block;
	padding: 8px 0 15px 50px;
	text-decoration: none;
	border-radius: 5px;
}
.hamburger .checkedMenu ul li .shoping {
	padding: 8px 0 15px 50px;
}
.hamburger .checkedMenu ul li .youtube  {
	padding: 15px 0 9px 50px;
}
.hamburger .checkedMenu ul li .shoping img{
	height: 16px;
}
.hamburger .checkedMenu ul li .youtube img {
	height: 24px;
}
.hamburger .checkedMenu .grovalNav li a {
	background: url("../images/bg09.png") 0px/18px;
}
.hamburger .checkedMenu li a::before {
	position: absolute;
	content: "";
	width: 22px;
	height: 22px;
	top: 14px;
	right: 14px;
	background: url("../images/ic20.png") no-repeat 0px/22px;
}
.hamburger .checkedMenu .sns a::before {
	display: none;
}
.hamburger .checkedMenu .grovalNav .current a {
	background: url("../images/bg10.gif") 0px/18px;
	position: relative;
}
.hamburger .checkedMenu .current a::before {
	position: absolute;
	content: "";
	width: 22px;
	height: 22px;
	top: 12px;
	left: 15px;
	background: url("../images/ic19.png") no-repeat 0px/22px;
	animation: current 0.5s infinite alternate;
}
.hamburger .checkedMenu .lock a {
	opacity: 0.2;
}
.hamburger .checkedMenu .lock {
	position: relative;
}
.hamburger .checkedMenu .lock::before {
	position: absolute;
	content: "";
	width: 22px;
	height: 30px;
	top: 10px;
	left: 0;
	right: 0;
	margin: auto;
	background: url("../images/ic26.png") no-repeat 0px/22px;
	z-index: 1;
}
.hamburger .checkedMenu a img {
	height: 15px;
	margin-bottom: 2px
}
.hamburger #checkBox {
	position: absolute;
	display: none;
	opacity: 0;
}
.hamburger #checkBox:checked~.checkedMenu {
	-webkit-transform: translateX(-100vw);
	transform: translateX(-100vw);
}
/* ▼ここをクリックでトグル展開 */
.hamburger #checkBox~label {
	position: absolute;
	content: "";
	width: 58px;
	height: 58px;
	top: 0;
	right: 0;
	display: block;
	cursor: pointer;
	z-index: 9999;
	/*	▼範囲チェック*/
	/*background-color: #fff;*/
}
.hamburger .menuIc .menuSvg {
	width: 100%;
	height: 100%;
	padding: 10px;
	background-color: #204d6a;
	border-radius: 0 0 0px 20px;
	position: relative;
	z-index: 9998;
}
.hamburger #checkBox:checked~.menuIc .menuSvg {
	background-color: #143951;
	border-top: solid 4px #0f3046;
	border-right: solid 2px #0f3046;
	border-bottom: solid 0px #0f3046;
	border-left: solid 2px #0f3046;
}
/*▼ハンバーガーモーション*/
.hamburger #checkBox~.menuIc .border {
	-webkit-transition: 200ms all ease;
	transition: 200ms all ease;
	-webkit-transform-origin: 250px 250px;
	transform-origin: 250px 250px;
}
.hamburger #checkBox:checked~.menuIc .border1 {
	-webkit-transform: translate(-102px, 102px) rotate(45deg);
	transform: translate(-102px, 102px) rotate(45deg);
}
.hamburger #checkBox:checked~.menuIc .border2 {
	opacity: 0;
}
.hamburger #checkBox:checked~.menuIc .border3 {
	-webkit-transform: translate(-102px, -102px) rotate(-45deg);
	transform: translate(-102px, -102px) rotate(-45deg);
}
/*▼shineEffect=======================*/
.hamburger #checkBox~label {
	overflow: hidden;
}
.hamburger #checkBox~label::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 50%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
	opacity: 0.5;
}
.hamburger #checkBox~label:hover::before {
	-webkit-animation: shine 1s;
	animation: shine 1s;
}
@-webkit-keyframes shine {
	100% {
		left: 125%;
	}
}
@keyframes shine {
	100% {
		left: 125%;
	}
}
/*▼SNSボタン======================================*/
.sns ul {
	width: calc(100% - 52px);
	max-width: 250px;
	margin: 40px auto 30px;
	display: -webkit-flex;
	display: flex;
	justify-content: -webkit-flex-end;
	justify-content: flex-end;
	position: relative;
}
footer .sns ul {
	margin: 40px auto 40px;
	padding-left: 30px;
}
.sns ul::before {
	position: absolute;
	content: "";
	display: inline-block;
	top: 5px;
	left: -12px;
	width: 35px;
	height: 35px;
	background: url("../images/ic21.png")no-repeat 0/35px;
}
footer .sns ul::before {
	top: -5px;
	left: 5px;
	width: 40px;
	height: 40px;
	background: url("../images/ic21.png")no-repeat 0/40px;
}
.sns ul li {
	margin-left: 10px;
	width: 25%;
}
.hamburger .sns ul li a {
	padding: 5px 8px 13px 8px;
	text-align: center;
	border-radius: 5px;
	background: #204d6a;
}
footer .sns ul li a {
	padding: 7px 10px 14px;
	text-align: center;
	border-radius: 5px;
	border: 1px solid #ccc;
}
.sns ul li .twitter img {
	width: 17px;
	height: 14px;
}
.sns ul li .instagram img {
	margin: auto;
	width: 17px;
	height: 17px;
}
.sns ul li .mail img {
	width: 16px;
	height: 15px;
}
/*▼scroleDownIc=====================*/
.scrollDown {
	position: relative;
	bottom: 20px;
	right: 16%;
	text-align: center;
}
.scrollDown img {
	width: 28px;
	width: 7%;
	animation: scroleDown 2.5s infinite alternate;
	opacity: 0.1;
}
/*▼pageTopBtn=====================*/
.pageTopBtn {
	position: fixed;
	bottom: 40px;
	right: -10px;
	text-align: center;
	z-index: 12345;
}
.pageTopBtn::after {
	position: absolute;
	content: "";
	top: -35px;
	left: 19px;
	width: 30px;
	height: 30px;
	border-radius: 5px;
	background-color: #204d6a;
	background: url("../images/ic10.png") no-repeat 0px/30px;
	animation: ufo 1s infinite alternate;
}
.pageTopBtn img {
	width: 45px;
}
.pageTopBtn a {
	padding: 0 10px 15px 15px;
	display: inline-block;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
	color: #204d6a;
	background: url("../images/bg10.gif") 0px/18px;
	border-radius: 30px 3px 3px 30px;
	box-shadow: 0 1px 3px rgba(34, 25, 25, 0.2);
}
.topErea {
	/*▼PCサイズはvw変更*/
	margin: 9px 2.666vw 0 2.466vw;
	/*background-color: #204d6a;*/
	overflow: hidden;
}
.mainText {
	width: 340px;
	height: 340px;
	margin: auto;
}
main {
	margin-bottom: 30px;
}
.contents {
	padding: 10px;
}
h3 {
	font-size: 1.9rem;
	margin-bottom: 10px;
	font-weight: bold;
}
.set {
	max-width: 400px;
	margin: 15px auto 80px;
}
.set:last-of-type {
	margin-bottom: 0;
}
.set .setContents {
	padding: 20px;
	text-align: center;
}
.set .h2Deco {
	text-align: center;
	position: relative;
	border-top: solid #204d6a 2px;
}
.intro .h2Deco, .mySkill .h2Deco {
	padding-top: 10px;
}
.set h2 img {
	height: 40px;
}
.h2Left {
	display: inline-block;
	margin-right: 25px;
	position: relative;
}
.h2Left::before {
	position: absolute;
	content: "";
	display: inline-block;
	width: 2px;
	height: 60px;
	top: -10px;
	right: -15px;
	background-color: #204d6a;
}
.h2Right {
	display: inline-block;
}
.set ul {
	margin-bottom: 100px;
}
section {
	margin-bottom: 80px;
	position: relative;
}
.news h2 {
	text-align: left;
	padding-left: 50px;
	margin: 5px;
}
.news h2 img {
	height: 18px;
	width: auto;
	margin-bottom: 4px;
}
.news .link {
	background: url("../images/bg09.png") 0px/18px;
	border: solid 2px #09597c;
	border-bottom: solid 4px #143951;
	border-radius: 8px;
	margin: 0 15px;
	color: #eef2f4;
}
/*▼調整＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
.add01 .link::before, .add02 .link::before, .add03 .link::before {
	position: absolute;
	content: "";
	width: 36px;
	height: 26px;
	top: 9px;
	right: 12px;
	margin: auto;
	animation: bouncingLoader05 0.5s infinite alternate;
	background: url("../images/ic27.png") no-repeat 0px/36px;
}
.add02 .link::before {
	background: url("../images/ic28.png") no-repeat 0px/36px;
}
.add03 .link::before {
	background: url("../images/ic29.png") no-repeat 0px/36px;
}
.news .link i {
	position: absolute;
	top: 16px;
	left: 12px;
	-webkit-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
}
.news .link i.faChevronDown {
	content: "";
	display: inline-block;
	top: 15px;
	left: 18px;
	width: 15px;
	height: 15px;
	background: url("../images/ic22.png") no-repeat 0/15px;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
}
.open .link i.faChevronDown {
	-webkit-transform: translateY(-3px) rotate(0deg);
	transform: translateY(-3px) rotate(0deg);
}
.news h2 {
	font-size: 1.8rem;
}
.news .setContents {
	display: none;
}

.news ul {
	margin-bottom: 0px;
}
.news li a{
	width: 100%;
	display: -webkit-flex;
	display: flex;
	margin-bottom: 8px;
	line-height: 1.2;
	border: solid 1px #09597c;
	border-radius: 3px;
	opacity: 0.6;
}
.news .new a {
	opacity: inherit;
}
.news li .date {
	background-color: #204d6a;
	color: #fff;
	display: -webkit-flex;
	display: flex;
	flex-wrap: -webkit-wrap;
	flex-wrap: wrap;
}
.news li .date p {
	text-align: center;
	padding: 8px;
	position: relative;
	top: 50%;
	margin-top: calc(-25% - 10px);
}
.news li .text {
	padding: 8px 0 8px 15px;
	text-align: start;
}
.news li a {
	position: relative;
}
.news li a::before {
	position: absolute;
	content: "";
	width: 22px;
	height: 22px;
	right: -11px;
	bottom: calc(50% - 12px);
	background: url("../images/ic20.png") no-repeat 0/22px;
}

.intro .alignLeft {
	text-align: left;
	width: 75%;
	margin: auto;
}
.intro .vertical {
	width: 100%;
}
.intro .vertical .verticalImg {
	margin: 15px 0 30px 0;
}
.intro .vertical .verticalImg img {
	width: 180px;
	top: 0;
	right: 0;
	left: 0;
	margin: auto;
	display: inline-block;
}
.intro .vertical .verticalText {
	width: 100%;
	margin: auto;
	position: relative;
	padding: 1px;
	border-radius: 3px;
	display: -webkit-flex;
	display: flex;
	justify-content: -webkit-space-between;
	justify-content: space-between;
	text-align: start;
}
.intro .vertical .verticalText .english {
	width: 50%;
	padding-left: 10px;
}
.intro .vertical .verticalText .japanese {
	width: 50%;
	padding-right: 5px;
	text-align: end;
}
.intro .vertical .verticalText::before {
	position: absolute;
	content: "";
	display: inline-block;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	width: 1px;
	height: 100%;
	background-color: #204d6a;
}
.mySkill h3 {
	margin: 120px 0 30px;
}
.mySkill section:first-of-type h3 {
	margin-top: 110px;
}
.mySkill .painting h3::before, .mySkill .design h3::before, .mySkill .coding h3::before, .mySkill .videoWork h3::before {
	position: absolute;
	content: "";
	display: inline-block;
	top: -60px;
	left: 0;
	right: 0;
	width: 55px;
	height: 50px;
	margin: auto;
}
.mySkill .painting h3::before {
	background: url("../images/ic06.png") no-repeat 7px 8px/45px;
	left: -15px;
}
.mySkill .design h3::before {
	left: -3px;
	background: url("../images/ic12.png") no-repeat 7px 8px/35px;
}
.mySkill .coding h3::before {
	left: 0px;
	background: url("../images/ic08.png") no-repeat 5px 8px/39px;
}
.mySkill .videoWork h3::before {
	left: 0px;
	background: url("../images/ic07.png") no-repeat 5px 8px/39px;
}
.mySkill h3 img {
	height: 25px;
}
.mySkill .painting {
	color: #d33c4a;
}
.mySkill .design {
	color: #09597c;
}
.mySkill .coding {
	color: #008438;
}
.mySkill .videoWork {
	color: #D36E00;
}
.mySkill section p {
	text-align: start;
}
.mySkill .toWorks a {
	padding: 10px 35px 10px 15px;
	color: #09597c;
	border: solid 2px #09597c;
	border-bottom: solid 4px #09597c;
	border-radius: 5px;
	position: relative;
}
.mySkill .toWorks a::before {
	position: absolute;
	content: "";
	display: inline-block;
	top: 9px;
	right: 10px;
	width: 18px;
	height: 18px;
	background: url("../images/ic20.png") no-repeat 0/18px;
}
.mailErea {
	margin: 150px 0;
}
/*▼footer=========================*/

footer {
	margin-top: 40px;
	padding: 20px 1px 7px;
	text-align: center;
	background-color: #204d6a;
	font-size: 1.4rem;
	color: #eef2f4;
	position: relative;
	/*z-index: 1;*/
}
footer::before {
	position: absolute;
	content: "";
	display: inline-block;
	top: -25px;
	right: 0;
	left: 0;
	width: 30px;
	height: 40px;
	margin: auto;
	background: url("../images/im07.png") no-repeat 0/30px;
}
/* ▼タブレット用デザインとして付け足すデザイン */
@media (max-width: 320px) {
	.pcOnly {
		display: none;
	}
	.spOnly {
		display: block;
	}
	.deco01::before {
		background: none;
	}
	/*▼scroleDownIc=====================*/
	.scroleDown {
		left: 2px;
	}
	.sns ul::before {
		left: 0px;
	}
	.mySkill h2 img {
		height: 35px;
	}
}
/* ▼タブレット用デザインとして付け足すデザイン */

@media (min-width: 768px) {
	.pcOnly {
		display: block;
	}
	.spOnly {
		display: none;
	}
	.logo {
		display: none;
	}
	.topErea {
		margin: 19px 18px 19px 20px;
	}
	.set {
		max-width: 600px;
		margin: 100px auto 200px;
	}
	.set:last-of-type {
		margin-bottom: 100px;
	}
}
/* ▼PC用デザインとして付け足すデザイン */
@media (min-width: 1024px) {	
body {
	font-size: 1.8rem;
}
	.pcOnly {
		display: block;
	}
	.spOnly {
		display: none;
	}
	.deco01::before {
		width: 100%;
		height: calc(100% - 5.333vw);
		height: calc(100% - 40px);
		top: 20px;
		left: 0;
		border-top: solid 1px #09597c;
		border-bottom: solid 1px #09597c;
	}
	.deco01::after {
		top: 0;
		left: 20px;
		right: 2.666vw;
		height: 100%;
		width: calc(100% - 5.333vw);
		width: calc(100% - 40px);
	}
}