@charset "utf-8";

/* -------------------------------------------------------------- */
	@media screen and (max-width: 767px) {
/* -------------------------------------------------------------- */

/*
=======================================================
 BASIC
=======================================================	
*/

html, body {
	min-width: initial;
}

body {
	font-size: 14px;
}

.noscroll {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

a:hover,
button:hover {
	opacity: 1;
}

.pc {display: none !important}


/*
=======================================================
 HEADER
=======================================================	
*/

header {
	height: 60px;
	padding: 0;
}

header .container {
	padding: 0;
}

#logo a {
	display: block;
	padding: 10px 20px;
}

#logo img {
	width: auto;
}

.btn-menu {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
}

/*
=======================================================
 GLOBAL NAVI
=======================================================	
*/

nav li {
	border-left: none;
	padding-left: 0;
	padding-right: 15px;
	}
	nav li.lang,
	nav li.signup {
		display: none;
	}
	
nav li.phone span {
	font-size: 10px;
	}
	nav li.phone span.number {
		font-size: 14px;
		padding-left: 34px;
		background-size: auto 14px;
	}
	
#lang-switcher {
	padding: 20px 10px;
}

#lang-switcher li {
	padding: 0;
	text-align: center;
	display: block;
}
	
#lang-switcher li a {
	display: inline-block;
	font-size: 10px;
	padding-left: 25px;
	background-size: 16px auto;
	letter-spacing: -.01em;
	text-align: left;
	line-height: 1.2;
}

/*
=======================================================
 COMMON
=======================================================	
*/

main {
	/*
	margin-top: 60px;
	*/
}

.container {
	width: 100% !important;
	padding: 0 15px;
}

section {
	position: relative;
	}
	section:not(#intro)::before {
		content: '';
		display: block;
		width: calc(100% - 20px);
		height: 100px;
		position: absolute;
		top: -48px;
		left: 10px;
		background-size: 100% auto;
		background-repeat: no-repeat;
		z-index: 3;
	}

section h2 {
	font-size: 28px;
	line-height: 1.35;
	}
	section:not(#intro) h2 {
		background: #16294b url(../images/sp/title_bg.png) no-repeat;
		background-size: cover !important;
		height: auto;
		padding: 0;
		min-height: 158px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		}
		section:not(#intro) h2::before {
			width: 61px;
			height: 58px;
			top: -22px !important;
		}
		section:not(#intro) h2::after {
			background: url(../images/sp/title_shadow.png) center top no-repeat;
			background-size: 100% auto;
		}
		
section:not(#intro) h2 span {
	padding: 0 10px !important;
	background: none !important;
	min-height: 0;
}

section h2 span em {
	font-size: 44px;
}
			
/*
=======================================================
 TITLE
=======================================================	
*/

.keyvisual {
	padding: 20px;
}

.main-title {
	top: 47%;
	width: 82%;
	height: auto;
	border-width: 2px;
	border-radius: 20px 0;
}

.main-title .quote {
	padding: 8px 0 5px 0;
}

.main-title .subtitle {
	padding: 7px 0;
}

.main-title span {
	letter-spacing: 0;
	}
	.main-title .quote span {
		font-size: 9px;
		background: url(../images/sp/main_title_quote.png) center top no-repeat;
		background-size: 100% auto;
		padding: 6px 18px 0 18px;
	}
	.main-title .subtitle span {
		font-size: 16px;
	}

.main-title h1 {
	padding: 5px 0;
}

.main-title h1 img {
	width: 72.4%;
	height: auto;
}

/*
=======================================================
 INTRO
=======================================================	
*/

#intro {
	padding: 40px 0 100px 0;
}

#intro h2 {
	margin-bottom: 30px;
	letter-spacing: -.025em;
	text-align: left;
}

#intro h2 span {
	padding-left: 35px;
	background-position: left 5px;
	background-size: 29px auto;
}

#intro p {
	font-size: 18px;
	margin-right: 0;
	background-size: 60px auto !important;
}

/*
=======================================================
 POINT
=======================================================	
*/

#point {
	padding-bottom: 100px;
	}
	#point::before {
		background-image: url(../images/sp/title_people_01.png);
	}
	
section#point h2 {
	line-height: 1.25;
}

#point ul {
	margin-top: 30px;
	position: relative;
	}
	#point ul::before {
		content: '';
		display: block;
		height: 80%;
		width: 1px;
		background: #eda629;
		position: absolute;
		top: 45px;
		left: 45px;
	}

#point li {
	background: none !important;
	align-items: flex-start;
	}
	#point li:not(:first-child) {
		margin-top: 0;
	}
	#point li:nth-child(even) {
		margin-left: 0;
		}
		#point li::before {
			content: '';
			position: absolute;
			transform: none !important;
			width: 7px !important;
			height: 7px !important;
			border-radius: 50% !important;
			background: #eda629 !important;
			left: 41.5px !important;
			top: -3.5px !important;
			z-index: 3;
		}
			#point li:first-child::before {
			content: none;
		}

#point li .inner {
	padding: 10px 0;
}
			
.point-no {
	font-size: 50px;
	border-width: 1px;
	width: 90px;
	height: 90px;
	padding-top: 12px;
	margin-right: 10px;
	margin-bottom: 45px;
	flex-shrink: 0;
	background: #fff;
	position: relative;
	}
	.point-no::before {
		font-size: 11px;
	}
	.point-no::after {
		content: '';
		display: block;
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: #eda629;
		position: absolute;
		left: 40.5px;
		bottom: -3.5px;
	}
	#point li:last-child .point-no::after {
		content: none;
	}
	
#point h3 {
	font-size: 18px;
	margin-bottom: 5px;
}

/*
=======================================================
 ABOUT
=======================================================	
*/

#about::before {
	background-image: url(../images/sp/title_people_02.png);
}

#about .wrapper {
	background: none;
	padding-bottom: 100px;
}

#about dl:not(.faq) {
	margin-top: 40px;
	}
	#about dl:not(.faq):not(:last-child) {
		margin-bottom: 40px;
		}
		#about dl:not(.faq)::before {
			width: 70px;
			height: 100px;
			right: -10px;
			top: 10px;
			z-index: 5;
		}
		#about dl:nth-child(3):not(.faq)::before {
			top: -10px;
		}

#about dl:not(.faq)>dt {
	padding: 10px 16px;
	font-size: 18px;
	border-width: 2px;
	border-radius: 4px;
	text-align: left;
	width: calc(100% - 30px);
	}
	#about dl:not(.faq)>dt::after {
		content: '';
		display: block;
		border: 8px solid transparent;
		border-top: 8px solid #fff;
		bottom: -16px;
	}

#about dl:not(.faq)>dd:not(.note) {
	background: url(../images/sp/bg_dot_yellow.png) repeat-y;
	background-size: 100% auto;
	margin-top: -20px;
	border-radius: 20px 4px;
	padding: 15px;
	padding-top: 35px;
	}
	#about dd.note {
		text-align: left;
		font-size: 11px;
		text-indent: -.75em;
	}
	
#about h3 {
	font-size: 18px;
	margin-bottom: 0;
}

#about dd em {
	font-size: 18px;
	margin-right: 0;
}

#about .faq-container {
	border-radius: 20px 0;
	padding: 15px;
	margin-top: 30px;
	}
	#about .faq-container::before {
		width: 70px;
		height: 100px;
		right: -10px;
		top: -85px;
	}
	
#about .faq {
	position: relative;
	}
	#about .faq:not(:last-child) {
		margin-bottom: 25px;
		}
		#about .faq::before {
			content: '';
			display: block;
			width: 1px;
			height: 40%;
			background: #473310;
			position: absolute;
			left: 15px;
			top: 25px;
		}
		#about .faq-container .faq:first-child::before	 {
			height: 35%;
		}

#about .faq dt {
	align-items: flex-start;
	padding: 5px 0 !important;
	}
	#about .faq dt::before {
		border-width: 1px;
		font-size: 15px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		margin-right: 10px;
		margin-top: -5px;
	}
	#about .faq dt::after {
		width: 4px;
		height: 4px;
		background: #473310;
		border-radius: 50%;
		left: 13.5px;
		top: 30px;
	}
	
#about .faq dd {
	padding: 5px 0;
	position: relative;
	}
	#about .faq dd::before {
		border-width: 1px;
		font-size: 15px;
		width: 30px;
		height: 30px;
		line-height: 30px;
		margin-right: 10px;
		background: #fff;
	}
	#about .faq dd::after {
		content: '';
		display: block;
		position: absolute;
		width: 4px;
		height: 4px;
		background: #473310;
		border-radius: 50%;
		left: 13.5px;
		top: 3px;
	}

/*
=======================================================
 EXPERIENCE
=======================================================	
*/

#experience::before {
	background-image: url(../images/sp/title_people_03.png);
}

#experience .wrapper {
	background: none;
	padding: 0;
	padding-bottom: 40px;
}

#experience .container>p {
	margin: 30px 0 20px 0;
}

#experience .container>p.last {
	margin: 20px 0 40px 0;
}

#experience dl {
	margin-top: 20px !important;
	padding-left: 10px !important;
	letter-spacing: 0;
	text-align: left;
	}
	#experience dl:nth-child(even) {
		padding-right: 0;
	}

#experience dt {
	background: url(../images/sp/bg_dot_yellow.png);
	font-size: 17px;
	padding: 5px 10px;
	margin-left: -10px;
	margin-right: 10px;
	line-height: 1.55;
	}
	#experience dl:nth-child(even) dt {
		margin-left: -10px;
	}

#experience dd {
	text-align: left;
	margin-top: -55px;
	filter: drop-shadow(-10px 10px 0 #eda629);
	transform: translateZ(0);
	}
	#experience dd::before {
		content: none !important;
	}

#experience dd .inner {
	flex-direction: column-reverse !important;
	border-width: 4px;
	background: #fff url(../images/sp/bg_dot_grey.png);
	background-size: 100% auto;
	border-radius: 20px 0 !important;
	margin-top: 0;
	padding: 15px;
	padding-top: 65px;
	letter-spacing: 0;
}
	
.exp-photo {
	flex-shrink: 0;
	width: 140px;
	height: 140px;
	margin-left: 0;
	margin-top: 10px;
	}
	#experience dl:nth-child(even) .exp-photo {
		margin-right: 0;
	}
	
/*
=======================================================
 PROCEDURE
=======================================================	
*/

#procedure::before {
	background-image: url(../images/sp/title_people_04.png);
}

#procedure .wrapper {
	padding: 40px 0 100px 0;
}

#procedure li {
	justify-content: space-between;
	align-items: stretch;
	}
	#procedure li:not(:last-child) {
		padding-bottom: 35px;
		}
		#procedure li:not(:last-child)::after {
			width: 29%;
			height: 35px;
			background-size: auto 80%;
		}

.step {
	color: #fff;
	width: 29%;
	font-size: 24px;
	border-radius: 0;
	padding: 10px 0;
	margin-right: 15px;
	}
	#procedure li:first-child .step {
		background: url(../images/sp/step_icon_01.png) center center / 70px auto no-repeat,
					url(../images/sp/bg_dot_yellow.png) left top / 300% auto no-repeat;
	}
	#procedure li:nth-child(2) .step {
		background: url(../images/sp/step_icon_02.png) center center / 70px auto no-repeat,
					url(../images/sp/bg_dot_yellow.png) left top / 300% auto no-repeat;
	}
	#procedure li:nth-child(3) .step {
		background: url(../images/sp/step_icon_03.png) center center / 70px auto no-repeat,
					url(../images/sp/bg_dot_yellow.png) left top / 300% auto no-repeat;
	}
	#procedure li:nth-child(4) .step {
		background: url(../images/sp/step_icon_04.png) center 60% / 55px auto no-repeat,
					url(../images/sp/bg_dot_yellow.png) left top / 300% auto no-repeat;
	}
	#procedure li:nth-child(5) .step {
			background: url(../images/sp/step_icon_05.png) center 60% / 70px auto no-repeat,
					url(../images/sp/bg_dot_yellow.png) left top / 300% auto no-repeat;
		}
		.step::before {
			font-size: 18px;
		}
	
#procedure dl {
	background: none !important;
	padding: 10px 0;
}

#procedure dt {
	font-size: 18px;
	line-height: 1.55;
}

#procedure dd {
	width: 100%;
}

/*
=======================================================
 MESSAGE
=======================================================	
*/

#message::before {
	background-image: url(../images/sp/title_people_05.png);
}

#message h2 {
	letter-spacing: 0 !important;
}

.message-container {
	background: url(../images/sp/bg_dot_yellow.png);
	background-size: 100% auto;
	padding: 40px 15px;
}

.message-container p {
	font-size: 17px;
	text-align: left;
	background-size: 60px auto !important;
}

#message .wrapper {
	padding: 30px 0 100px 0;
	background: url(../images/sp/bg_dot_grey.png);
	background-size: 100% auto;
}

#message h3 {
	font-size: 28px;
	margin-bottom: 30px;
    text-align: left;
}

#message h3 span {
	padding-left: 35px;
    background-position: left 5px;
    background-size: 29px auto;
}

#message ul {
	display: block;
}

#message li {
	margin: 0 10px 40px 10px;
	border-radius: 4px;
	padding: 20px;
	width: calc(100% - 20px);
	}
	#message li:last-child {
		margin-bottom: 0;
	}

.photo-container img {
	width: 140px;
}

.coord-name {
	font-size: 14px;
}

#message li p {
	font-size: 14px;
	margin-top: 1em;
}

/*
=======================================================
 SIGNUP
=======================================================	
*/

#signup::before {
	background-image: url(../images/sp/title_people_06.png);
}


#signup .wrapper {
	padding: 30px 0 40px 0;
}

.confirm #signup {
	padding-top: 35px;
}

article:not(.input) #signup {
	margin-top: 70px;
	padding-top: 0;
}

/*
=======================================================
 FORM
=======================================================	
*/

/*
-------------------------------------------------------
 INPUT
-------------------------------------------------------
*/	
	
	.form-table {
		box-shadow: 4px 4px 0 #b2b2b2;
	}
	
	.form-table th {
		display: block;
		width: 100%;
		padding: 15px !important;
		background: url(../images/sp/bg_navy.png);
		background-size: 100% auto;	
	}
	
	.form-table td {
		display: block;
		padding: 10px;
		border-bottom: none;
		background-color: #eeeeee;
	}
	
	input[type=text],
	input[type=mail], textarea {
		padding: 15px;
		font-size: 14px;
		border: solid 1px #aaaaaa;
		background-color: white;
	}

	.privacy-box {
		width: 100%;
		border-width: 1px;
	}
	
	.privacy-box dt {
		padding: 5px 0;
	}
	
	.privacy-box dd {
		height: 50px;
	}
	
	.privacy-box p {
		font-size: 12px;
	}
	
	button[type=submit],
	button.back {
		width: 100%;
	}
	
	.error {
		font-size: 14px;
		margin: 5px 0;
	}


/*
-------------------------------------------------------
 CONFIRM
-------------------------------------------------------
*/

	.confirm .form-table td span {
		padding: 15px;
		}
		.confirm .form-table tr:last-child td span {
			padding: 20px 15px;
		}
	
/*
-------------------------------------------------------
 FINISH / ERRORS
-------------------------------------------------------
*/
	.finish #signup .wrapper {
		padding: 60px 0 40px 0;
	}

	.finish h4 {
		font-size: 19px;
	}
	
	.finish #signup p {
		font-size: 12px;
	}

/*
=======================================================
 FOOTER
=======================================================	
*/

footer {
	background: #efefef;
}

footer .container {
	padding: 40px 15px;
}

.footer-contact {
	border-width: 6px;
	border-radius: 35px 35px;
}

.footer-contact dt {
	padding: 0 25px 10px 25px;
	font-size: 27px;
	border-radius: 0 0 29px 29px;
}

.footer-contact dd {
	padding: 0 15px 15px 15px;
}

.footer-contact .upper-content {
	display: block;
	padding: 20px 0;
}

.footer-contact p {
	font-size: 24px;
	padding-left: 0;
}

.footer-contact .address {
	font-size: 20px;
	margin-top: 15px;
}

.footer-contact .gmap {
	margin-top: 20px;
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 58.5%;
}

.footer-contact .lower-content {
	display: block;
	border-radius: 35px;
	padding: 15px;
}

.footer-contact .lower-content img {
	width: 63.5%;
}

.footer-contact .phone {
	margin-left: 0;
	text-align: center;
}

.footer-contact .phone span {
	font-size: 13px;
	}
	.footer-contact .phone .number {
		display: inline-block;
		margin-top: 10px;
		white-space: nowrap;
		text-align: left;
	}

.copy {
	padding: 22.5px 0;
	font-size: 10px;
}

.goform {
/*	display: none !important;*/
	right: 0;
	bottom: 0;
}

.gotop {
	right: 15px;
	bottom: 40px;
}

.gotop a {
	width: 40px;
	height: 40px;
	background-size: 24px auto;
}


/*------------------------------------------------------------------*/
	}
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
	@media screen and (min-width: 400px) and (max-width: 425px) {
/*------------------------------------------------------------------*/
	
	
/*------------------------------------------------------------------*/
	}
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
	@media screen and (max-width: 375px) {
/*------------------------------------------------------------------*/

	
/*------------------------------------------------------------------*/
	}
/*------------------------------------------------------------------*/
/*------------------------------------------------------------------*/
	@media screen and (max-width: 325px) {
/*------------------------------------------------------------------*/
	
	.exs {display: none !important}
	
	/*
	=======================================================
	 HEADER
	=======================================================	
	*/
	
	#logo a {
		padding: 10px;
	}
	
	nav li {
		padding: 0 5px 0 0;
		white-space: nowrap;
	}
	
	nav li.phone span.number {
		background-size: 16px auto;
		padding-left: 28px;
	}
	
	/*
	=======================================================
	 MAIN
	=======================================================	
	*/
	
	#about dl:not(.faq)>dt {
		font-size: 16px;
		padding-right: 3em;
	}
	
	.step::before {
		margin-right: 0;
	}
	
	/*
	=======================================================
	 FOOTER
	=======================================================	
	*/
	
	.footer-contact dt {
		font-size: 21px;
	}
	
	.footer-contact .lower-content {
		border-radius: 25px;
	}
	
	.footer-contact .phone span {
		font-size: 11px;
	}
	
	.footer-contact .phone .number {
		font-size: 22px;
		padding-left: 30px;
		background-size: 28px auto;
	}
	
	
/*------------------------------------------------------------------*/
	}
/*------------------------------------------------------------------*/