@charset "utf-8";

/* ---------------------------------------------------------- */
/* 共通
/* ---------------------------------------------------------- */
/* total style */
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}

html {
	width: 100%;
	height: 100%;
	font-size: 62.5%;
	}

body {
	width: 100%;
	min-width: 1200px;
	height: 100%;
	font-size: 1.4rem;
	font-family: -apple-system , BlinkMacSystemFont , "Hiragino Kaku Gothic ProN" , "游ゴシック Medium" , YuGothicM , YuGothic , "Helvetica Neue" , メイリオ , Meiryo , sans-serif;
	color: #595757;
	line-height: 1.6;
	-webkit-text-size-adjust: 100%;
	}

@media (max-width: 768px){
body {
	min-width: 320px;
	}
}

/* normalize 対策 */
h1,h2,h3,h4,h5,h6,p,ul,li,dl,dt,dd,ol,figure {
	font-weight: normal;
	margin: 0;
	padding: 0;
	list-style: none;
	}

/* clearfix */
.clearfix:before ,
.clearfix:after  {content:""; display: block; overflow: hidden;}
.clearfix:after  {clear: both;}
.clearfix        {zoom: 1;}

/* img */
img        {line-height: 0; vertical-align:middle; border: 0;}

/* font */
.text10    {font-size: 1.0rem;}
.text12    {font-size: 1.2rem;}
.text14    {font-size: 1.4rem;}
.text16    {font-size: 1.6rem;}
.text18    {font-size: 1.8rem;}
.text20    {font-size: 2.0rem;}
.text24    {font-size: 2.4rem;}

/* style */
.normal    {font-weight: normal;}
.bold      {font-weight: bold;}
.italic    {font-style: italic;}
.strike    {text-decoration: line-through;}

/* color */
.red       {color: #ff0000;}
.pink      {color: #f060a2;}
.orange    {color: #fa981c;}
.green     {color: #5ab52f;}
.blue      {color: #00a5eb;}
.purple    {color: #6669d7;}
.yellow    {color: #ffd900;}
.gray      {color: #666666;}
.white     {color: #ffffff;}
.black     {color: #595757;}

/* link */
a {
	color: #f060a2;
	word-break: break-all;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
	}
	
a:hover {
	text-decoration: none;
	}

/* selection */
::selection      {color: #fff; background:#f060a2;}
::-moz-selection {color: #fff; background:#f060a2;}

/* br */
br.sp      {display: none;}
@media (max-width: 640px){
	br.pc  {display: none;}
	br.sp  {display: inline-block;}
}

/* indent */
.indent {
	text-indent: -1em;
	padding: 0 0 0 1em;
	display: inline-block;
	}

.indent2 {
	text-indent: -2em;
	padding: 0 0 0 2em;
	display: inline-block;
	}

.indent3 {
	text-indent: -3em;
	padding: 0 0 0 3em;
	display: inline-block;
	}

/* margin */
.mt0      {margin-top: 0;}
.mt5      {margin-top: 5px;}
.mt10     {margin-top: 10px;}
.mt20     {margin-top: 20px;}
.mt30     {margin-top: 30px;}
.mt40     {margin-top: 40px;}
.mt50     {margin-top: 50px;}

.mr0      {margin-right: 0;}
.mr5      {margin-right: 5px;}
.mr10     {margin-right: 10px;}
.mr20     {margin-right: 20px;}
.mr30     {margin-right: 30px;}
.mr40     {margin-right: 40px;}
.mr50     {margin-right: 50px;}

.mb0      {margin-bottom: 0;}
.mb5      {margin-bottom: 5px;}
.mb10     {margin-bottom: 10px;}
.mb20     {margin-bottom: 20px;}
.mb30     {margin-bottom: 30px;}
.mb40     {margin-bottom: 40px;}
.mb50     {margin-bottom: 50px;}

.ml0      {margin-left: 0;}
.ml5      {margin-left: 5px;}
.ml10     {margin-left: 10px;}
.ml20     {margin-left: 20px;}
.ml30     {margin-left: 30px;}
.ml40     {margin-left: 40px;}
.ml50     {margin-left: 50px;}

/* padding */
.pt0      {padding-top: 0;}
.pt5      {padding-top: 5px;}
.pt10     {padding-top: 10px;}
.pt20     {padding-top: 20px;}
.pt30     {padding-top: 30px;}
.pt40     {padding-top: 40px;}
.pt50     {padding-top: 50px;}

.pr0      {padding-right: 0;}
.pr5      {padding-right: 5px;}
.pr10     {padding-right: 10px;}
.pr20     {padding-right: 20px;}
.pr30     {padding-right: 30px;}
.pr40     {padding-right: 40px;}
.pr50     {padding-right: 50px;}

.pb0      {padding-bottom: 0;}
.pb5      {padding-bottom: 5px;}
.pb10     {padding-bottom: 10px;}
.pb20     {padding-bottom: 20px;}
.pb30     {padding-bottom: 30px;}
.pb40     {padding-bottom: 40px;}
.pb50     {padding-bottom: 50px;}

.pl0      {padding-left: 0;}
.pl5      {padding-left: 5px;}
.pl10     {padding-left: 10px;}
.pl20     {padding-left: 20px;}
.pl30     {padding-left: 30px;}
.pl40     {padding-left: 40px;}
.pl50     {padding-left: 50px;}


/* ------------------------------------------------------- */
/* ヘッダー
---------------------------------------------------------- */
header {
	width: 100%;
	min-width: 1200px;
	height: 74px;
	text-align: center;
	background: #fff;
	border-bottom: 5px solid #00a5eb;
	top: 0;
	left: 0;
	position: fixed;
	z-index: 100;
	}

header::after {
	content: "";
	width: 100%;
	border-top: 1px solid #fff;
	border-bottom: 5px solid #f060a2;
	bottom: -11px;
	left: 0;
	position: absolute;
	z-index: -1;
	}

header #menu {
	width: 1150px;
	margin: auto;
	position: relative;
	}

header h1 {
	width: 160px;
	line-height: 1;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	position: absolute;
	z-index: 101;
	}

header h1 img {
	width: 100%;
	}

header h1 a {
	margin-top: -10px;
	display: block;
	}

header h1 a:hover {
	margin-top: -5px;
	}

header nav ul {
	display: flex;
	}

header nav ul li {
	line-height: 1;
	padding: 0 25px 0 0;
	}

header nav ul li.story {
	padding: 0 222px 0 0;
	}

header nav ul li:last-child {
	margin: 0;
	}

header nav ul li a {
	padding: 20px 0;
	display: block;
	}

header nav ul li a.ov ,
header nav ul li a:hover {
	background: url(../images/common/bg_menu_btn.png) center center no-repeat;
	background-size: 34px auto;
	}

header nav ul li a.ov {
	pointer-events: none;
	}

header nav ul li a img {
	height: 30px;
	}

header .btn {
	display: none;
	}

@media (max-width: 768px){
header {
	min-width: 100%;
	height: 50px;
	border-bottom: 3px solid #00a5eb;
	}

header::after {
	bottom: -7px;
	border-bottom: 3px solid #f060a2;
	}

header #menu {
	width: 100%;
	}

header h1 {
	width: 95px;
	}

header h1 a {
	margin-top: -5px;
	}

header nav {
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(255,255,255,0.9);
	margin: 0;
	top: 0;
	left: 0;
	position: fixed;
	visibility: hidden;
	opacity: 0;
	transition: opacity .35s, visibility .35s;
	overflow: auto;
	padding: 70px 0 30px 0;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	}

header nav.open {
	opacity: 1;
	visibility: visible;
	}

header nav ul {
	width: 100%;
	display: block;
	}

header nav ul li ,
header nav ul li.story {
	padding: 0;
	}

header nav ul li a {
	padding: 15px 0;
	}

header nav ul li a:hover {
	background: none;
	}

header .btn {
	width: 25px;
	height: 20px;
	top: 12px;
	right: 12px;
	cursor: pointer;
	position: absolute;
	display: block;
	z-index: 100;
	}

header .btn span ,
header .btn span:before ,
header .btn span:after {
	content: "";
	width: 25px;
	height: 4px;
	background: #f060a2;
	border-radius: 50px;
	top: 50%;
	transition: .3s;
	display: block;
	position: absolute;
	}

header .btn span {
	margin: 0;
	left: 0;
	}

header .btn span:before {
	margin: -11px 0 0 0;
	left: 0;
	}

header .btn span:after {
	margin: 7px 0 0 0;
	left: 0;
	}

header .btn.close span {
	background: transparent;
	}

header .btn.close span:before {
	background: #00a5eb;
	margin: -2px 0 0 0;
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	}

header .btn.close span:after {
	background: #00a5eb;
	margin: -2px 0 0 0;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
	}
}

@media (max-width: 640px){
header nav ul {
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	flex-wrap: wrap;
	}

header nav ul li ,
header nav ul li.story {
	width: 50%;
	}
}

@media (min-width: 769px){
nav ul {
	display: flex !important;
	}
}


/* ------------------------------------------------------- */
/* コンテンツ
---------------------------------------------------------- */
#wrapper {
	min-height: 800px;
	background: url(../images/common/bg_flag_left.png) top 80px left no-repeat , url(../images/common/bg_flag_right.png) top 80px right no-repeat , url(../images/common/bg_contents.png);
	background-size: auto , auto , 40px 1px;
	padding: 170px 0 100px 0;
	}

h2 {
	font-size: 3.4rem;
	font-family: 'Candal', sans-serif;
	line-height: 1;
	text-align: center;
	margin: 0 0 60px 0;
	position: relative;
	}

h2::before {
	content: "";
	width: 30px;
	height: 5px;
	border-radius: 50px;
	bottom: -20px;
	left: 50%;
	position: absolute;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	}

h2.pink::before {
	background: #f060a2;
	}

h2.orange::before {
	background: #fa981c;
	}

h2.green::before {
	background: #5ab52f;
	}

h2.blue::before {
	background: #00a5eb;
	}

h2.purple::before {
	background: #6669d7;
	}

h2 small {
	font-size: 3.0rem;
	margin: 0 10px;
	}

.comingsoon {
	width: 430px;
	height: 178px;
	background: url(../images/common/img_comingsoon.png) center center no-repeat;
	background-size: 430px auto;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	margin: 180px auto 0 auto;
	}

@media (max-width: 768px){
#wrapper {
	min-height: auto;
	background: url(../images/common/bg_flag_left.png) top 50px left -40px no-repeat , url(../images/common/bg_flag_right.png) top 50px right -40px no-repeat , url(../images/common/bg_contents.png);
	background-size: 250px auto , 250px auto , 40px 1px;
	padding: 120px 0 80px 0;
	}

h2 {
	font-size: 3.0rem;
	margin: 0 0 50px 0;
	}

h2 small {
	font-size: 2.0rem;
	}

.comingsoon {
	width: 50%;
	height: 0;
	background-size: contain;
	margin: 80px auto 0 auto;
	padding: 50.412511% 0 0 0;
	}
}

@media (max-width: 640px){
#wrapper {
	background: url(../images/common/bg_flag_left.png) top 54px left -150px no-repeat , url(../images/common/bg_flag_right.png) top 54px right -150px no-repeat , url(../images/common/bg_contents.png);
	background-size: 250px auto , 250px auto , 40px 1px;
	padding: 100px 0 60px 0;
	}

h2 {
	font-size: 2.4rem;
	margin: 0 0 40px 0;
	}

h2 small {
	font-size: 1.8rem;
	margin: 0 5px;
	}

.comingsoon {
	width: 65%;
	margin: 70px auto 0 auto;
	padding: 26.98255% 0 0 0;
	}
}


/* ------------------------------------------------------- */
/* PAGE TOP
---------------------------------------------------------- */
#pageTop {
	width: 40px;
	height: 40px;
	background: #f060a2;
	border: 1px dashed #fff;
	border-radius: 50px;
	box-shadow: 0 0 0 3px #f060a2;
	bottom: 15px;
	right: 15px;
	position: fixed;
	z-index: 100;
	display: block;
	}

#pageTop:after {
	content: "";
	width: 12px;
	height: 12px;
	top: -11px;
	bottom: 0;
	right: 11px;
	border: 8px solid transparent;
	border-bottom: 12px solid #fff;
	box-sizing: border-box;
	margin: auto;
	position: absolute;
	}

#pageTop:hover {
	background: #00a5eb;
	box-shadow: 0 0 0 3px #00a5eb;
	}

@media (max-width: 768px){
#pageTop {
	width: 35px;
	height: 35px;
	bottom: 10px;
	right: 10px;
	}

#pageTop:after {
	width: 10px;
	height: 10px;
	right: 9px;
	border: 7px solid transparent;
	border-bottom: 10px solid #fff;
	}
}

/* ---------------------------------------------------------- */
/* magnific-popup */
/* ---------------------------------------------------------- */
.mfp-container {
	padding-left: 20px;
	padding-right: 20px;
	}

button.mfp-close {
	width: 40px !important;
	height: 40px;
	background: #f060a2;
	border: 3px solid #fff;
	border-radius: 50px;
	top: -18px !important;
	right: -18px !important;
	opacity: 1;
	display: block;
	padding: 0;
	z-index: 100;
	cursor: pointer;
	overflow: hidden;
	text-indent: 120%;
	white-space: nowrap;
	}

button.mfp-close:hover {
	background: #00a5eb;
	}

button.mfp-close:before {
	content:"";
	width: 5px;
	height: 20px;
	background: #fff;
	border-radius: 50px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	position:absolute;
	display:inline-block;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	}

button.mfp-close:after{
	content:"";
	width: 5px;
	height: 20px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 50px;
	margin: auto;
	position:absolute;
	display:inline-block;
	-moz-transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	transform:rotate(-45deg);
	}

.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
	}

.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.7;
	}

.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
	}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
	}

.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
	}

.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
	}

.mfp-iframe-scaler.pop-movie iframe {
	border: 5px solid #fff;
	}

@media (max-width: 640px){
button.mfp-close {
	width: 30px !important;
	height: 30px;
	top: -13px !important;
	right: -13px !important;
	}

button.mfp-close:before{
	width: 3px;
	height: 15px;
	}

button.mfp-close:after{
	width: 3px;
	height: 15px;
	}
}


/* ------------------------------------------------------- */
/* フッター
---------------------------------------------------------- */
footer {
	width: 100%;
	text-align: center;
	background: #fff;
	border-top: 5px solid #f060a2;
	padding: 50px 0;
	position: relative;
	}

footer::after {
	content: "";
	width: 100%;
	border-bottom: 1px solid #fff;
	border-top: 5px solid #00a5eb;
	top: 1px;
	left: 0;
	position: absolute;
	}

footer #share {
	margin: 0 0 20px 0;
	}

footer #share p {
	font-size: 1.6rem;
	font-family: 'Candal', sans-serif;
	margin: 0 0 5px 0;
	}

footer #share ul {
	display: inline-block;
	}

footer #share ul li {
	margin: 0 10px;
	float: left;
	}

footer #share ul li a:hover {
	opacity: 0.7;
	}

footer #share ul li a img {
	width: 40px;
	}

footer #copyright p {
	font-size: 1.2rem;
	}

footer #copyright p span {
	font-family: Verdana , Droid Sans;
	}

@media (max-width: 768px){
footer {
	border-top: 3px solid #f060a2;
	padding: 40px 20px;
	}

footer::after {
	border-top: 3px solid #00a5eb;
	}

footer #share p {
	font-size: 1.4rem;
	}

footer #share ul li {
	margin: 0 5px;
	}

footer #share ul li a img {
	width: 30px;
	}
}