@charset "UTF-8";

/*---------------------------
　　　基本設定

font-family: 'Noto Sans JP', sans-serif; 100 300 400 500 700 900

[色]
maincolor: a70048;
subcolor:
--------------------------- */

html {
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 62.5%;
	line-height: 1;
}
html.hidden {overflow: hidden;}
body {
	height: 100%;
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.6em;

}
.wrap {
	height: 100%;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
h1,h2,h3,h4,h5,h6,p {
	padding: 0;
	margin: 0;
	letter-spacing: 0.03em;
	line-height: 1.3;
}
a {
	text-decoration: none;
	color: inherit;
	letter-spacing: 0.03em;
	transition: .3s ease;
	box-sizing: border-box;
	cursor: pointer;
}
table,tr,th,td {
	margin: 0;
}
ul,ol,dl,dt,dd{
	margin: 0;
	padding: 0;
}
li {
	list-style: none;
	padding: 0;
}
/*---------------------------
　　　
--------------------------- */
p {
	font-size: 1.2rem;
}
p.sentence {
	font-size: 1.2rem;
	line-height: 2;
	text-align: justify;
	text-justify: inter-ideograph;
}
p.center {
	text-align: center;
}
.container {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
span.c_blue {
	color: #1978b7;/*青*/
}
#blank {
	height: 60px;
}
@media screen and (max-width: 850px) {
	br.sp_none {
		display: none;
	}
}
@media screen and (min-width: 850px){
	p {
		font-size: 1.5rem;
	}
	p.sentence {
		font-size: 1.5rem;
	}
	br.pc_none {
		display: none;
	}
	#blank {
		height: 120px;
	}
}
.maB10 {margin-bottom: 10px;}
.maB20 {margin-bottom: 20px;}
.maB30 {margin-bottom: 30px;}
.maB40 {margin-bottom: 40px;}
.maB50 {margin-bottom: 50px;}
.maB60 {margin-bottom: 60px;}
.maB70 {margin-bottom: 70px;}
.maB80 {margin-bottom: 80px;}
.maB90 {margin-bottom: 90px;}
.maB100 {margin-bottom: 100px;}
.maB110 {margin-bottom: 110px;}
.maB120 {margin-bottom: 120px;}
.maB130 {margin-bottom: 130px;}
.maB140 {margin-bottom: 140px;}
.maB150 {margin-bottom: 150px;}

.paB10 {padding-bottom: 10px;}
.paB20 {padding-bottom: 20px;}
.paB30 {padding-bottom: 30px;}
.paB40 {padding-bottom: 40px;}
.paB50 {padding-bottom: 50px;}
.paB60 {padding-bottom: 60px;}
.paB70 {padding-bottom: 70px;}
.paB80 {padding-bottom: 80px;}
.paB90 {padding-bottom: 90px;}
.paB100 {padding-bottom: 100px;}
.paB110 {padding-bottom: 110px;}
.paB120 {padding-bottom: 120px;}
.paB130 {padding-bottom: 130px;}
.paB140 {padding-bottom: 140px;}
.paB150 {padding-bottom: 150px;}

@media screen and (max-width: 850px) {
.maB10 {margin-bottom: 5px;}
.maB20 {margin-bottom: 10px;}
.maB30 {margin-bottom: 15px;}
.maB40 {margin-bottom: 20px;}
.maB50 {margin-bottom: 25px;}
.maB60 {margin-bottom: 30px;}
.maB70 {margin-bottom: 35px;}
.maB80 {margin-bottom: 40px;}
.maB90 {margin-bottom: 45px;}
.maB100 {margin-bottom: 50px;}
.maB110 {margin-bottom: 55px;}
.maB120 {margin-bottom: 60px;}
.maB130 {margin-bottom: 65px;}
.maB140 {margin-bottom: 70px;}
.maB150 {margin-bottom: 75px;}

.paB10 {padding-bottom: 5px;}
.paB20 {padding-bottom: 10px;}
.paB30 {padding-bottom: 15px;}
.paB40 {padding-bottom: 20px;}
.paB50 {padding-bottom: 25px;}
.paB60 {padding-bottom: 30px;}
.paB70 {padding-bottom: 35px;}
.paB80 {padding-bottom: 40px;}
.paB90 {padding-bottom: 45px;}
.paB100 {padding-bottom: 50px;}
.paB110 {padding-bottom: 55px;}
.paB120 {padding-bottom: 60px;}
.paB130 {padding-bottom: 65px;}
.paB140 {padding-bottom: 70px;}
.paB150 {padding-bottom: 75px;}
}

.sp {display: block!important;}
.pc {display: none!important;}

@media screen and (min-width: 850px) {
	.sp {display: none!important;}
	.pc {display: block!important;}
}

/*上からフェードイン*/
.fadein_top {
	opacity: 0;
	transform: translate(0,-100px);
	transition: 1s ease;
}
.fadein_top.scrollin {
	opacity: 1;
	transform: translate(0,0);
}
/*右からフェードイン*/
.fadein_right {
	opacity: 0;
	transform: translate(100px,0);
	transition: 1s ease;
}
.fadein_right.scrollin {
	opacity: 1;
	transform: translate(0,0);
}
/*下からフェードイン*/
.fadein_bottom {
	opacity: 0;
	transform: translate(0,100px);
	transition: 1s ease;
}
.fadein_bottom.scrollin {
	opacity: 1;
	transform: translate(0,0);
}
/*左からフェードイン*/
.fadein_left {
	opacity: 0;
	transform: translate(-100px,0);
	transition: 1s ease;
}
.fadein_left.scrollin {
	opacity: 1;
	transform: translate(0,0);
}

/*---------------------------
　　　オープニング画面
--------------------------- */
#opening-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #fff;
	z-index: 1100;
}
#opening-bg .box {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 280px;
	transform: translate(-50%,-50%);
	text-align: center;
	z-index: 1100;
}
#opening-bg .box .left {
	width: 78%;
	margin: 0 auto 6%;
	animation: leftfade 3.0s ease 1;
}
#opening-bg .box .right {
	animation: rightfade 3.0s ease 1;
}
@keyframes leftfade {
	0% {
		opacity: 0;
		transform: translateX(-20%);
	}
	10% {
		opacity: 1;
		transform: translateX(0);
	}

	65% {
		 opacity: 1;
		 transform: scale(1);
	}
	85% {
		opacity: 0;
		transform: scale(1.3);
	}
	100% {
		opacity: 0;
	}
}
@keyframes rightfade {
	0% {
		opacity: 0;
		transform: translateX(20%);
	}
	10% {
		opacity: 0;
		transform: translateX(20%);
	}
	20% {
		opacity: 1;
		transform: translateX(0);
	}

	65% {
		 opacity: 1;
		 transform: scale(1);
	}
	85% {
		opacity: 0;
		transform: scale(1.3);
	}
	100% {
		opacity: 0;

	}
}
@media screen and (min-width: 850px) {
	#opening-bg .box {
		width: 450px;
	}
}
/*---------------------------
　　　ロード画面
--------------------------- */
#loader-bg {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background-color: #fff;
	z-index: 1100;
}
#loader {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 300px;
	height: auto;
	font-size: 2.0rem;
	transform: translate(-50%,-50%);
	text-align: center;
	color: #a70048;/*赤*/
	z-index: 1100;
}

#loader p {
	margin-top: 1.4em;
	animation: flash 2s linear infinite;
}

@keyframes flash {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}
@media screen and (max-width: 500px) {
	#loader img {
		width: 150px;
	}
}
@media screen and (min-width: 850px) {
	#loader img {
		width: 300px;
	}
}

.loader_image,
.loader_image:after {
  border-radius: 50%;
  width: 5em;
  height: 5em;
}
.loader_image {
  margin: 0 auto;
  font-size: 10px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(165, 0, 73, 0.2);
  border-right: 1.1em solid rgba(165, 0, 73, 0.2);
  border-bottom: 1.1em solid rgba(165, 0, 73, 0.2);
  border-left: 1.1em solid #a50049;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*---------------------------
　　　ヘッダー
--------------------------- */
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 60px;
	background-color: #fff;
	z-index: 900;
}

header .container {
	display: flex;
	align-items: center;
	height: 60px;
	width: 95%;
	max-width: 95%;
	justify-content: flex-end;
}
#headA {
	transform: translateY(-60px);
	z-index: 800;
	transition: .3s ease;
}

#headB {
	position: fixed;
	top: 0;
	left: 0;
	width: 120px;
	height: 80px;
	border-bottom-right-radius: 15px;
	background-color: #a70048;/*赤*/
	z-index: 800;
	transform: translateY(-80px);
	transition: .3s ease;
}

#headB .logo {
	height: 100%;
}
#headB .logo a {
	display: flex;
	align-items: center;
	height: 100%;
	justify-content: center;
}
#headB .logo a img {
	width: 65%;
}

.menu_list_pc {
	display: flex;
}
.menu_list_pc li {
	padding: 0 15px;
}
.menu_list_pc li a {
	font-size: 1.4rem;
}
.menu_list_pc li.contact a {
	background-color: #a70048;/*赤*/
	color: #fff;
	padding: 0.9em 1.5em;
	border-radius: 25px;
}
.menu_list_sp {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	text-align: center;
	padding-top: 120px;
}
.menu_list_sp li {
	padding: 15px 5px;
	font-size: 1.4rem;
	box-sizing: border-box;
}

#headC {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	transform: translateY(-100%);
	z-index: 500;
	transition: .3s ease;
}
#headC.active {
	transform: translateY(0);
}
#icon_blog {
	position: fixed;
	right: 15px;
	bottom: 15px;
	width: 60px;
	height: 60px;
	z-index: 30;
}
#icon_blog a {
	display: block;
}
@media screen and (max-width: 850px) {
	.menu_list_pc {
		display: none;
	}
}
@media screen and (min-width: 850px) {
	header {
		height: 120px;
		transition: .3s ease;
	}
	header.scroll {
		height: 90px;
	}
	header .container {
		height: 120px;
		transition: .3s ease;
	}
	header .container.scroll  {
		height: 90px;
	}
	#headA {
		transform: translateY(-120px);
	}
	#headB {
		width: 230px;
		height: 150px;
		border-bottom-right-radius: 30px;
		transform: translateY(-150px);
	}
	#headB.scroll {
		width: 200px;
		height: 120px;
	}
	#headB:hover {
		opacity: .6;
	}
	#icon_blog {
		right: 50px;
		bottom: 50px;
		width: 80px;
		height: 80px;
	}
	#icon_blog a:hover {
		transform: translateY(-10px);
	}
	.menu_list_pc li a:hover {
		color: #a70048;/*赤*/
	}
	.menu_list_pc li.contact a:hover {
		color: #fff;
		background-color: #000;
	}
	#headC {
		display: none!important;
	}

}
@media screen and (min-width: 1000px) {
	.menu_list_pc li a {
		font-size: 1.5rem;
	}
	#headB {
		width: 300px;
		height: 150px;
		border-bottom-right-radius: 30px;
	}
	#headB .logo a img {
		width: 60%;
	}
}
/*---------------------------
　　　フッター
--------------------------- */
#sns_link {
	border-top: solid 1px #cfcfcf;
	border-bottom: solid 1px #cfcfcf;
}
#sns_link ul {
	display: flex;
	flex-wrap: wrap;
}
#sns_link ul li {
	width: 50%;
	text-align: center;
}
#sns_link ul li a {
	display: block;
	font-size: 1.4rem;
	padding: 1.5em 1em;
}
#sns_link ul li a span {
	position: relative;
	padding-left: 40px;
}
#sns_link ul li a span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 30px;
	height: 30px;
	transform: translateY(-50%);
}

#sns_link ul li:nth-child(1) a span::before {
	background: url("../img/common/icon_facebook.svg") center / contain no-repeat;
}
#sns_link ul li:nth-child(2) a span::before {
	background: url("../img/common/icon_twitter.svg") center / contain no-repeat;
}
#sns_link ul li:nth-child(3) a span::before {
	background: url("../img/common/icon_instagram.svg") center / contain no-repeat;
}
#sns_link ul li:nth-child(4) a span::before {
	background: url("../img/common/icon_youtube.svg") center / contain no-repeat;
}
#footA {
	padding: 50px 0;
}
#footA .logo {
	text-align: center;
	margin-bottom: 30px;
}
#footA .logo img {
	width: 300px;
}
#footA .link_list li:not(:last-child) {
	margin-bottom: 15px;
}
#footA .link_list li a {
	font-size: 1.4rem;
}
#footA .right_box {
	display: flex;
	justify-content: center;
}
#footA .link_list.first {
	margin-right: 30px;
}
#footB {
	padding: 25px 0;
	background-color: #444444;
	color: #fff;
}
#footB p {
	text-align: center;
	font-size: 1.0rem;
	line-height: 1.5;
}

@media screen and (max-width: 850px) {
	#sns_link ul li {
		box-sizing: border-box;
	}
	#sns_link ul li:nth-child(1) {
		border-right: solid 1px #cfcfcf;
		border-bottom: solid 1px #cfcfcf;
	}
	#sns_link ul li:nth-child(2) {
		border-bottom: solid 1px #cfcfcf;
	}
	#sns_link ul li:nth-child(3) {
		border-right: solid 1px #cfcfcf;
	}
}
@media screen and (min-width: 850px) {
	#sns_link ul li a {
		font-size: 1.8rem;
	}
	#sns_link ul li a:hover {
		background-color: #EFEFEF;
	}
	#sns_link ul li {
		width: 25%;
		box-sizing: border-box;
	}
	#sns_link ul li a span {
		padding-left: 60px;
	}
	#sns_link ul li a span::before {
		width: 40px;
		height: 40px;
	}
	#sns_link ul li:not(:last-child) {
		border-right: solid 1px #cfcfcf;
	}
 	#footA {
		padding: 120px 0;
	}
	#footA .container {
		display: flex;
	}
	#footA .left_box {
		width: 300px;
		margin-right: 150px;
	}
	#footA .right_box {
		justify-content: flex-start;
	}
	#footA .link_list a:hover {
		color: #a70048;/*赤*/
	}
	#footA .link_list.first {
		margin-right: 70px;
	}
	#footB p {
		text-align: center;
		font-size: 1.2rem;
	}
}

/*=============================
.btn-trigger
=============================*/
.trigger {
	position: absolute;
	top: 50%;
	right: 10px;
	width: 50px;
	min-width: 50px;
	height: 50px;
	min-height: 50px;
	margin-left: 7px;
	transform: translateY(-50%);
	z-index: 1400;
}
.btn-trigger {
	position: absolute;
	left: 50%;
	top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width: 20px;
	height: 14px;
	cursor: pointer;
	pointer-events: none;
}
.btn-trigger span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #a70048;/*赤*/
}
.btn-trigger, .btn-trigger span {
	display: inline-block;
	transition: all .5s;
	box-sizing: border-box;
}
.btn-trigger span:nth-of-type(1) {
	top: 0;
}
.btn-trigger span:nth-of-type(2) {
	top: 6px;
}
.btn-trigger span:nth-of-type(3) {
	bottom: 0;
}

/*=============================
#btn01
=============================*/
#btn01.active span:nth-of-type(1) {
  -webkit-transform: translateY(6px) rotate(-45deg);
  transform: translateY(6px) rotate(-45deg);
}
#btn01.active span:nth-of-type(2) {
  opacity: 0;
}
#btn01.active span:nth-of-type(3) {
  -webkit-transform: translateY(-6px) rotate(45deg);
  transform: translateY(-6px) rotate(45deg);
}

@media screen and (max-width: 850px) {

}
@media screen and (min-width: 850px) {
	.btn-trigger {
		display: none;
	}
}