@charset "utf-8";

@font-face {
    font-family: "YakuhanJP";
    font-style: normal;
    font-weight: 300;
    src: url('../../font/YakuHanJP_Regular.woff') format('woff');
}

body {
	color: #333;
	font-family: "YakuhanJP","NotoSansMonoCJKjp-Regular-sub";
}
@media screen and (max-width: 640px) {
	body {
		font-size: 20px;
	}
}

body {
	/* remove footer banner */
	padding-bottom: 0px;
}

/* Common width */
.wrap {
	max-width: 1020px;
	margin-left: auto;
	margin-right: auto;
}
.wrap_in {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}
.spbr {
	display: none;
}
@media screen and (max-width: 640px) {
	.wrap_in {
		padding-left: 5%;
		padding-right: 5%;
	}
	.spbr {
		display: inline;
	}
}
a {
	transition: .3s;
}
button {
	padding: 0;
	border: 0;
	cursor: pointer;
}


/* レスポンシブ画像 */
.responsive_img {
	display: block;
	width: 100%;
	height: auto;
}

/* 通常文字の行幅 */
.txt_normal {
	line-height: 1.8em;
}
.txt_bold {
	font-weight: 700;
}
.txt_red {
	color: #f00;
}

.txt_breakline {
	text-decoration: line-through;
}


/* Common margin */
.mt15 { margin-top: 15px; }
.mt60 { margin-top: 60px; }
.mt120 { margin-top: 120px; }


/********** パンくずリスト **********/
.pankuzu_list {
	line-height: 74px;
}
.pankuzu_list .text {
	display: inline-block;
	padding: 0 10px;
}
.pankuzu_list text:first-child {
	padding-left: 0;
}


/********** スマホ用メニュー **********/
@media screen and (max-width: 640px) {
	header {
		width: 100%;
		height: 100px;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 5;
		background-color: #FFF;
		opacity:0.9;
	}
	#header_logo {
		position: absolute;
		top: 10px;
		left: 10px;
	}
	#menu-bt {
		position: absolute;
		top: 30px;
		right: 30px;
		cursor: pointer;
	}
	nav#menu {
		display: none;
		width: 100%;
		position: fixed;
		top: 100px;
		z-index: 10;
	}
	nav#menu ul {
		margin: 0px;
		padding: 0px;
	}
	nav#menu ul li {
		position: relative;
		list-style-type: none;
		cursor: pointer;
	}
	nav#menu ul li a {
		width: 100%;
		display: block;
		background-color: #006383;
		color: #fff;
		border-bottom: 1px solid #fff;
		padding: 30px 0px 30px 30px;
		box-sizing: border-box; /*線と余白を横幅に含めない*/
	}
	nav#menu ul li span {
	  	display: block;
	  	position: absolute;
	  	width: 40px;
	  	height: 40px;
	  	color: #fff;
	  	font-size: 40px;
	  	line-height: 1em;
	  	right: 30px;
	  	top: 0;
	  	bottom: 0;
	  	margin: auto;
	}
	nav#menu ul li.menu-list {
		display: none;
	}
	nav#menu ul li.menu-list a {
		color: #006383;
		border-bottom: 1px solid #006383;
		background-color: #fff;
		padding: 30px 0px 30px 50px;
	}
	#head-menu {
		width: 100%;
		height: 100vh;
		background-color: #000;
		opacity: 0.6;
	}
}


/********** フッター **********/
#page-top {
	background: #666;
}
@media screen and (max-width: 1000px) {
	.footer {
		margin-top: 2px;
	}
	.footer ul {
		width: 100%;
		padding: 0px;
	}
	.footer ul li {
		text-align: center;
		width: 50%;
		float: left;
		border-right: 1px solid #b9baba;
		border-top: 1px solid #b9baba;
		box-sizing: border-box; /*線と余白を横幅に含めない*/
	}
	.footer ul li:nth-child(even) {
		border-right: 0px;
	}
	.footer ul li:last-child { /*奇数項目用*/
		width: 100%;
		border-right: 0px;
		border-bottom: 1px solid #b9baba;
	}
	.footer ul li a {
		display: block;
		padding: 30px 0px;
	}
	.copyright_bg {
		width: 100%;
		padding: 35px 0;
		background-color: #eeefef;
	}
	.copyright_font {
		font-size: 90%;
		text-align: center;
	}
}


/********** メインイメージ **********/
#main_image {
	position: relative;
	text-align: center;
	background: url(../../maskpouch/img/mask_main_bg_pc.jpg) repeat-x;
	background-size: auto;
	background-position: top;
	padding-bottom: 80px;
}
#main_image .main_visual_01 {
	padding-top: 40px;
	display: block;
}
#main_image .main_visual_02 {
	display: none;
}
@media screen and (max-width: 640px) {
	#main_image {
		margin-top: 100px;
		background: url(../../maskpouch/img/mask_main_bg_sp.jpg) repeat-x;
		background-size: cover;
	}
	#main_image .main_visual_01 {
		display: none;
	}
	#main_image .main_visual_02 {
		display: block;
	}
}


/********** ボタン **********/
.button {
	/* お問い合わせボタン */
	display: inline-block;
	width: 700px;
	height: 105px;
	background: #672306;
}
.button .text {
	display: block;
	width: 100%;
	color: #fff;
	font-size: 2.8em;
	font-weight: bold;
	line-height: 100px;
	text-align: center;
	background: #f5510b;
	transition: .5s;
}
.button:hover {
	background: #c6653c;
}
.button:hover .text {
	background: #f4976f;
}
.button .text img {
	/* 下向き括弧 */
	margin-left: 30px;
	display: inline-block;
}
@media screen and (max-width: 640px) {
	.button {
		width: 100%;
	}
	.button .text {
		font-size: 1.5em;
	}
}


/********** デザイン **********/
.design {
	background: url(../../maskpouch/img/mask_design_bg.jpg) no-repeat;
	background-size: contain;
	background-position: 0px 0px;
	padding: 80px 0 24px 0;
	text-align: center;
}
.design .wrap_in .sub_title {
	color: #0051a4;
	margin-bottom: 50px;
}
.design ul {
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.design li {
    display: inline-block;
    position: relative;
    margin-bottom: 56px;
}
.design li .use {
	margin-top: 20px;
	font-weight: bold;
}
.design li .use_name {
	margin-top: 16px;
	color: #0051a4;
	font-weight: bold;
}
.design li .use_text {
	width: 270px;
	margin-top: 8px;
	font-size: 14px;
	line-height: 1.25em;
}
.design h3 {
	font-size: 1.5em;
	margin-top: 36px;
}
@media screen and (max-width: 640px) {
	.design .wrap_in .text {
		font-size: 1.3em;
	}
	.design ul {
		display: block;
	}
	.design li {
		display: block;
		width: 70%;
		margin: 0 auto 96px auto;
	}
	.design li img {
		width: 100%;
		height: auto;
	}
	.design li .use {
		font-size: 1.3em;
	}
	.design li .use_name {
		font-size: 1.3em;
		margin-top: 32px;
	}
	.design li .use_text {
		width: 100%;
		margin-top: 12px;
		font-size: 1.1em;
	}
	.design h3 {
		margin-top: 0px;
		font-size: 1.6em;
	}
}


/********** 名入れ **********/
.insert_title {
	padding: 24px 0;
	background-color: #111;
	color: #FFF;
	text-align: center;
	font-size: 1.5em;
	line-height: 1.25em;
}
.insert {
	background: url(../../maskpouch/img/price_bg.png) repeat;
	padding: 40px 0;
	text-align: center;
}
.insert_detail img {
	display:block;
	float: left;
}
.insert_detail img:last-child {
	float: right;
}
@media screen and (max-width: 950px) {
	.insert_detail img {
		width: 48%;
		height: auto;
	}
}
@media screen and (max-width: 640px) {
	.insert_detail img {
		width: 100%;
		height: auto;
		float: none;
		margin-bottom: 40px;
	}
	.insert_detail img:last-child {
		float: right;
		margin-bottom: 0px;
	}
}


/********** オリジナルデザイン **********/
.original_title {
	padding: 24px 0;
	background-color: #e94f06;
	color: #FFF;
	text-align: center;
	font-size: 1.5em;
	line-height: 1.25em;
}
.original {
	background-color: #ffdccc;
	padding: 40px 0;
	margin-bottom: 80px;
	text-align: center;
}
.original_price img {
	display:block;
	float: left;
}
.original_price img:last-child {
	float: right;
}
@media screen and (max-width: 950px) {
	.original_price img {
		width: 48%;
		height: auto;
	}
}
@media screen and (max-width: 640px) {
	.original_price img {
		width: 100%;
		height: auto;
		float: none;
		margin-bottom: 40px;
	}
	.original_price img:last-child {
		margin-bottom: 0px;
	}
}


/********** コンテンツ内のサブタイトル **********/
.sub_title {
	font-size: 2.8em;
	line-height: 1em;
	text-align: center;
}
.sub_title_big {
	font-size: 2.0em;
	line-height: 1em;
}
@media screen and (max-width: 640px) {
	.sub_title {
		font-size: 2.0em;
		line-height: 1.2em;
	}
	.sub_title_big {
		font-size: 1.5em;
		line-height: 1em;
		margin-top: 130px;
	}
}


/********** フォーム **********/
input, select {
	margin: 0;
}

#form .required::after {
	content: "\203B";
	color: #f00;
}

.form_box .item {
	/* 項目名 */
	display: inline-block;
	width: 25%;
	line-height: 1.5em;
	vertical-align: top;
	padding: 5px 0;
	padding-right: 5%;
}
.form_box .text {
	display: inline-block;
	width: 65%;
	line-height: 1.5em;
	vertical-align: top;
	padding: 5px 0;
}
.form_box input[type="text"],[type="email"] {
	/* テキスト入力ボックス */
	display: inline-block;
	width: 65%;
	height: 1.5em;
	line-height: 1.5em;
	vertical-align: top;
	padding: 5px;
}
.form_box textarea {
	/* テキストエリア */
	display: inline-block;
	width: 65%;
	height: 10.0em;
	line-height: 1.5em;
	vertical-align: top;
	padding: 5px;
}
.form_box select {
	/* 都道府県などの選択 */
	display: inline-block;
	width: auto;
	min-width: 30%;
	height: 2.0em;
	font-size: 1.0em;
	line-height: 1.5em;
	vertical-align: top;
	padding: 0px;
}
.form_box .checkbox {
	/* チェックボタン */
	display: inline-block;
	position: relative;
	width: auto;
	height: 1.5em;
	line-height: 1.5em;
	vertical-align: top;
	padding: 5px;
	cursor: pointer;
}
.form_box .checkbox::before {
	/* チェックボタンのボタン部 */
	content: "";
	display: block;
	position: absolute;
	top: calc(0.3em + 5px);
	left: 0;
	width: 0.9em;
	height: 0.9em;
	line-height: 0.9em;
	border: 1px solid #333;
	border-radius: 50%;
}
.form_box .checkbox input {
	display: none;
}
.form_box .checkbox span {
	/* チェックボックスのテキスト */
	line-height: 1.5em;
	padding-left: 1.2em;
}
.form_box .checkbox input:checked + span::before {
	/* チェックボタンチェック時のマーク */
	content: "";
	display: block;
	position: absolute;
	top: calc(0.5em + 5px);
	left: 0.2em;
	width: 0.6em;
	height: 0.6em;
	line-height: 0.4em;
	border-radius: 50%;
	background: #0090bd;
}

.user_info {
	/* ユーザー情報の入力エリア */
	position: relative;
}
.user_info .none {
	/* 非表示用 */
	display: none;
}
.user_info .title {
	color: #fff;
	line-height: 2.0em;
	padding: 0 0.5em;
	background: #006383;
}
.user_info .title .toggle_btn {
	/* 参加者2以降の情報入力エリア切り替えボタン */
	position: absolute;
	top: 0; right: 0;
	width: 2.0em;
	height: 2.0em;
	line-height: 2.0em;
	text-align: center;
	background: #0090bd;
}
.user_info .toggle {
	cursor: pointer;
}

.user_info .box {
	padding: 30px 15px;
	border: 1px solid #999;
	border-top: none;
}
.user_info .box .item {
	/* 参加者情報の項目名 */
	display: inline-block;
	width: 25%;
	line-height: 1.5em;
	vertical-align: top;
	padding: 5px 0;
	padding-right: 5%;
}
.user_info .box input {
	/* 参加者情報の入力ボックス */
	display: inline-block;
	width: 65%;
	height: 1.5em;
	line-height: 1.5em;
	vertical-align: top;
	padding: 5px;
}

.contact_btn {
	/* 送信確認ボタン */
	display: block;
	margin-left: auto;
	margin-right: auto;
	opacity: 1.0;
	transition: .3s;
}
.contact_btn:hover {
	opacity: 0.6;
}
@media screen and (max-width: 640px) {
	.contact_btn {
		width: 100%;
		height: auto;
	}
	.contact_btn img {
		width: 100%;
		height: auto;
	}
}


/********** プライバシーポリシー **********/
.hr_line {
	height: 1px;
	background: #9fa0a0;
}
#privacy p {
	color: #666;
	line-height: 1.8em;
}
#privacy p:first-child {
	color: #f00;
}
#privacy p:last-child {
	height: 250px;
	overflow: auto;
}


/********** 送信確認ページ **********/
.check_list {
	/* テーブル */
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
.check_list table {
	width: 100%;
}
.check_list th,
.check_list td {
	line-height: 1.5em;
	padding: 10px;
	border: 1px solid #999;
}
.check_list th {
	width: 30%;
	text-align: left;
}
.check_list td {
	width: 70%;
	text-align: left;
}

.check_list .err_message {
	color: #f00;
}
@media screen and (max-width: 640px) {
	.check_list {
		font-size: 0.8em;
	}
}

/* フォームボタン[戻る/送信] */
.form_button {
	text-align: center;
}
.btn_return,
.btn_send {
	display: inline-block;
	vertical-align: top;
	margin-left: 10px;
	margin-right: 10px;
	opacity: 1.0;
	cursor: pointer;
}
.btn_return:hover,
.btn_send:hover {
	opacity: 0.6;
}
@media screen and (max-width: 640px) {
	.btn_return,
	.btn_send {
		width: 100%;
		height: auto;
		margin-left: 0;
		margin-right: 0;
	}
	.btn_send img {
		width: 100%;
		height: auto;
	}
}


/***** 送信完了ページ *****/
.finish_page_box {
	padding: 45px 20px;
	border: 1px solid #999;
}
.finish_page_box .title {
	color: #006383;
	font-weight: 700;
	font-size: 1.8em;
	line-height: 1.2em;
	text-align: center;
}
.finish_page_box a {
	color: #006383;
	border-bottom: 1px solid #006383;
}
.finish_page_box a:hover {
	opacity: 0.6;
	border-bottom: none;
}

.finish_page_btn {
	text-align: center;
}
.finish_page_btn a {
	display: inline-block;
}
.finish_page_btn a:hover {
	opacity: 0.6;
}
@media screen and (max-width: 640px) {
	.finish_page_btn img {
		max-width: 100%;
		height: auto;
	}
}


/* PCとスマホの表示切替 */
.sp_view {
	display: none;
}
@media screen and (max-width: 640px) {
	.pc_view {
		display: none;
	}
	.sp_view {
		display: block;
	}
}

.sp_view2 {
	display: none;
}
@media screen and (max-width: 1000px) {
	.pc_view2 {
		display: none;
	}
	.sp_view2 {
		display: block;
	}
}

@media screen and (max-width: 640px) {
	/* スマホの場合の改行位置 */
	.sp_br {
		display: inline-block;
	}
}

/* Youtube用 */
.youtube {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin-bottom: 80px;
  }
  .youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
  }