body { font-size: 16px; }
h1 { display: none; }
h1 + p { padding-top:1em; }
div > h2 { font-size: 120%; color: #45beb4; font-weight: bold;}

#faq .container,#policy .container,#contact .container { width:90%; }

#faq dl { padding-bottom: 0.5em; }
#faq dt { margin-bottom: 0.5em; }
#faq dd { margin-bottom: 1em; }

#policy dt { margin-bottom: 0.5em; }
#policy dd { margin-bottom: 1em; }

#contact a.btn-primary { background-color: #faac15; border: 0; }
#contact a.btn-primary:hover { background-color: #faac15; border: 0; }



/*
#couple-share
*/


#couple-share { background: #b4ece6; }
/*#couple-share .row {overflow: hidden;} */
#couple-share em { color:#23b2a8; font-weight:500; font-style: normal;}
.row-eq-height {
	display: flex;
  flex-wrap: wrap;
}
.row.row-eq-height .col-xs-2,
.row.row-eq-height .col-xs-9 {
	margin-left: -1px;
}
.bg-std { background: #4ecdc4; }
.bg-wh { background: #fff; }
.bg-bk { background: #535354; }

.bg-san-1,.bg-san-2 { position: relative; overflow:hidden; }
.bg-san-1:after { width: 0; height: 0;content: "";
	position: absolute;
	border-left: 52vw solid transparent;
	border-right: 52vw solid transparent;
	border-top: 20px solid #fff;
	background: #b4ece6;
	bottom:0;
}
.bg-san-2 {
	width: 375px;
}
.bg-san-2:before { width: 0; height: 0;content: "";
	position: absolute;
	border-left: 188px solid transparent;
	border-right: 188px solid transparent;
	border-bottom: 20px solid #535354;
	background: #b4ece6;
}
.bg-san-2:after { width: 0; height: 0;content: "";
	position: absolute;
	border-left: 188px solid transparent;
	border-right: 188px solid transparent;
	border-top: 20px solid #535354;
	background: #b4ece6;
	bottom:0;
}





/* #logo-box --------- */

#logo-box { padding: 50px 0 50px; }
#logo-box > p { width:205px; margin:0 auto; }
#logo-box > p > img:first-child {margin-right:15px;}
#logo-box > p > img:last-child {margin-top:10px;width:101px;}



/* #task-box --------- */

#header {
	padding: 0;
	height: 143px;
}
#header > div {
	padding-bottom: 20px;
}
#task-box {
	height: 100%;
	position: relative;
}
#task-box p {
	font-size: 1.4em; text-align: center; margin: 0;
}
#task-box p.task-name { font-weight: 600; letter-spacing: 2px; }
#task-box {
}
#task-box div {
	padding: 0 1em;
	line-height: 570%;
	height: 65%;
}
#task-box div p {
	text-align: left;
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}
#task-box img {
	position: absolute;
	top: 5px;
	right: -10px;
	opacity: 0.2;
}


/* .wan .nyan --------- */

.ani-pic { padding: 1em 0 0; position: relative; }
.ani-pic p { position: absolute; }
.wan .ani-pic p { left:-10px; }
.nyan .ani-pic p { right:-10px; }
.wan, .nyan { min-height: 117px; }

.ani-cmt { padding: 1em 0.5em 0;}
.ani-cmt p { display: inline-block;
	position: relative;
	padding: 1em 1em;
	background: #fff;
}
.ani-cmt p:after {
	content: "";
	display: inline-block;
  position: absolute;
  top: 18px;
  border: 8px solid transparent;
}
.wan .ani-cmt p:after {
  left: -15px;
  border-right: 8px solid #fff;
}
.nyan .ani-cmt p:after {
  right: -15px;
  border-left: 8px solid #fff;
}


/* #map-box --------- */
#map-box { padding: 1px 0; }
#map-box table { margin: 2em auto; width: 88%; background-color:#D9D9D9; }
#map-box p { padding: 2em 0; text-align: center;}
#map-box th,
#map-box td { padding: 0; }
#map-box th img { width: 100%; }

#category { overflow: hidden; padding: 2em 0; }
#category table { margin: 0 auto; }
#category table th { height: 38px; padding: 0;}
#category table td > img { width: 64px; height: 82px; }
#category .carousel-inner { margin-bottom: 1em; }
#category .item > div { overflow-y: auto; width: 88%; height: 430px; margin:0 auto; background-color:#D9D9D9; }
#category .carousel-indicators { bottom: 5px; }
#category .carousel-control { background: none; margin-top: 215px; }
#category .carousel-control.left { margin-left: -15px; }
#category .carousel-control.right { margin-right: -15px; }
#category .carousel-control i { color: white; }
#category .item div.male img.share { right: -5px; }
#category .item div.female img.share { right: -15px; }
#category .item div.couple img.share { right: -15px; }

/* #please-box --------- */

#please-box {
	padding: 2em 0;
}
#please-box > div {
	width: 94%;
	margin: 0 auto;
	padding: 2em 1em 1.5em;
	border: 14px solid #3fa59e;
	background-color: #f1fffd;
	position: relative;
}
#please-box > div > div {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 100px;
	overflow: hidden;
}
#please-box > div > div img {
	width: 95px;
	position: absolute;
	top: 28px;
	right: -7px;
	opacity: 0.2;
}
#please-box p { font-size: 21px; text-align: center;}
#please-box p.task-name { font-weight: 600; letter-spacing: 2px; }
#please-box p.task-name + p { margin-bottom: 2em; }
body.app #please-box { display:none; }

/* #fix-box --------- */

#fix-box { position:fixed;top:0; width:100%; height: 66px; z-index: 100; box-shadow: 0 7px rgba(175,175,175,0.3); background: #fff; display: none;}
#fix-box > div:first-child { background: #4ecdc4; text-align: center; padding: 1em 0;}
#fix-box > div:last-child {
	height: 60px;
	line-height: 60px;
	padding-top: 6px;
}
#fix-box > div:last-child p {
	display: inline-block;
	vertical-align: middle;
	line-height: normal;
}
#fix-box > div:last-child img {
	opacity: 0.2;
	position: absolute;
	top: 0;
	right: -3px;
}
#fix-box .task-name { font-size: 18px; font-weight: 600; }


/* #timeline-box --------- */

#timeline-box {
	margin-top: 100vh;
	display: none;
}
body.app #timeline-box { margin-top: 1em; position: relative; }
#timeline-title { color: #fff; font-size:24px; font-weight: bold; text-align: center; margin: 0; position: relative; height: 140px; }
#timeline-title p { display: inline-block; letter-spacing: 2px; border-bottom: 5px solid #fff; padding: 0 12px 0; margin: 0 0 50px;}

#timeline-title:after {
	content: "";
  position: absolute;
  height: 2px;
  width: 100vw;
	background-color: #666;
	left: calc((375px - 100vw) / 2);
	bottom: 2px;
}

#timeline-date {
	list-style: none;
	width: 600px;
	padding: 0;
	position: relative;
	font-size: 0;
	margin: 0 30px;
}
#timeline-date li {
	display: inline-block;
	color:#5b5c5b;
	vertical-align: top;
	margin: 3em 0 20px;
	position: relative;
	width: 120px;
}
#timeline-date li div {
	position: absolute;
	width: 100%;
	top: 18px;
	left: 0;
	font-size: 14px;
	text-align: center;
}
#timeline-date li div:after {
	content: "";
  position: absolute;
	border-radius: 50%;
  height: 20px;
  width: 20px;
	background-color: #59eae0;
	left: 50%;
	bottom: -20px;
	z-index: 200;
	margin-left: -15px;
}
#timeline-date li.selected div {
	top: -25px;
	left: 0;
	width: 170px;
	font-size: 18px;
	font-weight: bold;
	position: relative;
	padding: 5px 15px;
	background: #ffe76d;
	margin: 0 -25px 1em;
}
#timeline-date li.selected div:before {
	content: "";
  position: absolute;
	display: inline-block;
	top: 100%;
	left: 50%;
	margin-left: -12px;
	border: 12px solid transparent;
	border-top: 12px solid #ffe76d;
}
#timeline-date li.selected div:after {
	height: 24px;
  width: 24px;
	background-color: #ffe76d;
	left: 50%;
	bottom: -50px;
	z-index: 200;
	margin-left: -12px;
}

#timeline-detail { list-style: none; padding: 0 19px; width: 1875px; height: 370px; margin: 0; }
#timeline-detail li { padding: 19px 0 0; margin: 2em 19px 0 0; width: 337px; float: left; position: relative; border-top:16px solid #fff; background-color: #fff; }
#timeline-detail li img {
	width: 100%;
}
#timeline-detail li p:last-child { text-align: center; }
#timeline-detail li.selected {
	border-top:16px solid #ffe76d;
}
#timeline-detail li:before {
	content: "";
	position: absolute;
	display: inline-block;
	top: -55px;
	left: 50%;
	margin-left: -20px;
	border: 20px solid transparent;
	border-bottom: 20px solid transparent;
}
#timeline-detail li.selected:before {
	border-bottom: 20px solid #ffe76d;
}
#timeline-detail li:nth-child(1):before {
	left: 72px;
}
#timeline-detail li:nth-child(5):before {
	left: auto;
	right: 50px;
}

/* #copy-box --------- */
#copy-box { text-align: center; color: #fff; padding: 1em 0;}

.wan,
.nyan { /*width: 100px;*/ }
.wan img,
.nyan img { width: 100px; }

.row.wan,
.row.nyan { width: 100vw; margin: 0 calc((375px - 100vw - 30px) / 2); padding: 0 calc((100vw - 375px) / 2); overflow-x: hidden; }
.row.full { margin: 0 calc((375px - 100vw - 30px) / 2); overflow: hidden; }
.row.full > div { width: 375px; margin: 0 auto; }
@media ( min-width : 375px ) {
	.container { width: 375px; margin: auto; }
}
@media ( max-width : 373px ) {
	.row.full { margin: 0 -15px; }
	.row.full > div { width: 100vw; }
	#timeline-detail li { width: 282px; }
	#timeline-title:after { left: 0; }
	#timeline-detail { height: 320px; }
	.bg-san-2 {
		width: 100vw;
	}
	.bg-san-2:before,
	.bg-san-2:after {
		border-left-width: 166px;
		border-right-width: 166px;
	}
	.row.wan,
	.row.nyan { min-height: 31vw; margin: 0 -15px; }
	.wan img,
	.nyan img { width: auto; height: 27vw; }
}

/* QAカラー設定 --------- */
.qcolor {
	color:#08c;
	font-size: initial;
    padding-right: 10px;
}

.acolor {
	color:#f03;
	font-size: initial;
    padding-right: 10px;
}

.qbody {
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	white-space: initial;
	color: #333;
}

.abody {
	color: #666;
    font-size: 14px;
	line-height: 1.5;
	background: #fbfbfb;
	padding-bottom: 15px;
	padding: 6px 12px;
}

.subsection {
	border: solid #e9e9e9;
    border-width: 1px 0;
    padding: 8px 10px;
    background: #f3f3f3;
    color: #888;
    font-size: 13px;
    line-height: 1.5;
}

.qacontent {
	margin-left: -20px;
	margin-right: -20px;
}

.contactbtn {
	border: 1px solid;
	border-radius: 4px;
    padding: 15px;
    min-height: 50px;
    font-size: 14px;
	line-height: 1.5;
	background-color: #FFBB13;
	color: #fff;
	margin-left: 10px;
	margin-right: 10px;
	width: unset;
}

.contactbody {
	font-size: 15px;
	line-height: 1.5;
	text-align: left;
	white-space: initial;
	color: #333;
	padding: 6px 12px;
}

.qah2space {
	margin-top: 10px;
    margin-bottom: 10px;
}

/* Andorid アプリ対応 --------- */
.collapse {
	display:initial;
}