@charset "utf-8";
@import "reset.css";
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese');

/* ---------------------------------------------------------

	01. 基礎設計
	02. 構成
	03. ヘッダー
	04. ナビゲーション
	05. フッター
	06. ホームページ(top)

--------------------------------------------------------- */

/* ---------------------------------------------------------

	01. 基礎設計

--------------------------------------------------------- */
html {
	color: #3A3A3A;
	font-size: 2.667vw; /* 10/375px*100 */
	font-family: 'Noto Sans JP', sans-serif;
	height: 100%;
	position: relative;
	-webkit-font-smoothing: antialiased;
}
body{
	background-color:#fff;
	font-size:1.7rem;
	height:100%;
}
main a {
	color: #333;
	text-decoration:none;
}
.device_pc main a:hover {
	text-decoration: none;
}
.device_pc main a[href^="tel:"] {
	color: inherit;
	pointer-events: none;
	text-decoration: none;
}

/*===============================================
	基礎設計：768px未満
===============================================*/
@media screen and (max-width:767px) {
	.only_pc {display: none;} /* PC時のみ表示する要素に */
}

/*===============================================
	基礎設計：768px以上
===============================================*/
@media screen and (min-width:768px) {
	html {font-size: 0.7142vw;} /* 10/768px*100 */
	.only_sp {display: none;} /* SP時のみ表示する要素に */
}

/*===============================================
	基礎設計：1400px以上
===============================================*/
@media screen and (min-width:1400px) {
	html {font-size: 10px;}
}

/* ---------------------------------------------------------

	02. ページ構成

--------------------------------------------------------- */
.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow: hidden;
	padding-top: 5.6rem;
	position: relative;
	width: 100%;
}
main {
	flex: 1;
}
.cmn_container {
	margin: 0 auto;
	padding: 0 2.5rem;
	position: relative;
	width: 100%;
}

/*===============================================
	ページ構成：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.wrapper {
		min-height: 100%;
		min-width: 100%;
		padding-top: 9.8rem;
	}
	.cmn_container {
		padding: 0 20.0rem;
	}
	.cmn_contents_wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.cmn_contents_wrap .cmn_title_page {width: 100%;}
	.cmn_contents_main {width: 67%;}
	.cmn_contents_side {width: 26%;}
}

/*===============================================
	ページ構成：1400px以上
===============================================*/
@media screen and (min-width:1400px) {
	.cmn_container {
		max-width: 1400px;
	}
}

/* ---------------------------------------------------------

	03. ヘッダー

--------------------------------------------------------- */
header {
	background-color: #fff;
	border-bottom: 0.1rem solid #D3D3D3;
	display: flex;
	align-items: center;
	height: 5.6rem;
	padding: 0 0 0.3rem 1.8rem;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
}
.header_logo {
	width: 60%;
}
.header_logo a {
	background: url(../img/logo1.png) center/contain no-repeat;
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: 18.87%;
	text-indent: 100%;
	white-space: nowrap;
	
}
.device_pc .header_logo a {transition: opacity 0.25s;}
.device_pc .header_logo a:hover {opacity: 0.7;}

.header_switch {
	background: transparent;
	border: none;
	display: block;
	font-size: 1.2rem;
	height: calc(3rem + 1em);
	padding: 2.6rem 0 0;
	position: absolute;
	top: 0.6em;
	right: 1.8rem;
	width: 3.6rem;
	color: #333;
}
.header_switch::before,
.header_switch::after,
.header_switch span::before,
.header_switch span::after {
	content: '';
	background-color: #33b3ed;
	border-radius: 0.4rem;
	display: block;
	height: 0.4rem;
	position: absolute;
	left: 10%;
	transition: opacity 0.2s, transform 0.2s;
	width: 90%;
}
.header_switch::before,
.header_switch::after {top: 1.2rem;}
.header_switch span::before {top: 0.4rem;}
.header_switch span::after {top: 2rem;}

.header_switch.is-open::before {transform: rotate(-45deg);}
.header_switch.is-open::after {transform: rotate(45deg);}
.header_switch.is-open span::before,
.header_switch.is-open span::after {opacity: 0;}

/*===============================================
	ヘッダー：768px以上
===============================================*/
@media screen and (min-width:768px) {
	header {
		justify-content: space-between;
		height: 9.8rem;
		padding: 0 0 0 3.5rem;
		box-shadow:0px 5px 20px 0 rgba(0,0,0,0);
	}
	.header_logo {
		width: 28.7rem;
	}
	.header_switch {display: none;}
}

/* ---------------------------------------------------------

	04. ナビゲーション

--------------------------------------------------------- */
nav {
	background-color: #fcfcfc;
	height: calc(100vh - 5.6rem);
	opacity: 0;
	overflow-y: auto;
	padding: 2.5rem 2.0rem 5.0rem;
	position: fixed;
	top: 5.6rem;
	left: 0;
	transition: opacity 0.2s, visibility 0.2s;
	visibility: hidden;
	width: 100%;
	height:100%;
	text-align:center;
}
nav.is-open {
	opacity: 1;
	visibility: visible;
}

.header_menu > li {
	border-bottom: 0.1rem solid #D3D3D3;
}
.header_menu > li > a {
	color: #333;
	display: flex;
	align-items: center;
	font-size: 1.8rem;
	font-weight: bold;
	height: 3.0em;
	position: relative;
	text-decoration: none;
}

.header_utility {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 3.5rem;
}
.header_utility li {
	background-color: #fff;
	border: 0.1rem solid #D3D3D3;
	width: 31%;
}
.header_utility a {
	background-position: center 1.0rem;
	background-repeat: no-repeat;
	background-size: auto 3.0rem;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	font-weight: bold;
	height: 100%;
	line-height: 1.2;
	padding: 4.5rem 0 1.0rem;
	text-align: center;
	text-decoration: none;
}
.header_menu li.header_products a:hover{color:#65cae5; transition:0.3s;}
.header_menu li.header_company a:hover{color: #f07191; transition:0.3s;}
.header_menu li.header_report a:hover{color: #f7ad6d; transition:0.3s;}
.header_menu li.header_movie a:hover{color: #97F281; transition:0.3s;}
.header_utility a:hover{color:#333; transition:0.3s;}
.header_shop a {background-image: url(../img/shop_icon.png);}
.header_info a {background-image: url(../img/mail_icon.png);}
.header_privacy a {background-image: url(../img/privacy.png);}

/*===============================================
	ナビゲーション：768px以上
===============================================*/
@media screen and (min-width:768px) {
	nav {
		background-color: transparent;
		display: flex;
		align-items: center;
		height: 100%;
		opacity: 1;
		overflow-y: visible;
		padding: 0;
		position: static;
		transition: none;
		visibility: visible;
		width: auto;
	}

	.header_menu {
		display: flex;
		align-items: flex-end;
		height: 100%;
		margin-right: 2.5em;
	}
	.header_menu > li {
		border-bottom: none;
		display: flex;
		height: 60%;
	}
	.header_menu > li > a {
		align-items: flex-start;
		height: 100%;
		padding: 0 2.2em;
	}
.header_menu > li > a {transition: color 0.25s;}
.header_products:hover > a {color: #65cae5;}
.header_company:hover > a {color: #f07191;}
.header_report:hover > a {color: #f7ad6d;}
.header_movie:hover > a {color: #97F281;}
.header_faq:hover > a {color: #333;}


	.header_utility {
		display: flex;
		justify-content: flex-start;
		height: 100%;
		margin-top: 0;
	}
	.header_utility li {
		border: none;
		border-left: 0.1rem solid #d3d3d3;
		height: 100%;
		width: 9.8rem;
	}
	.header_utility a {
		background-position: center 1.5rem;
		font-size: 1.4rem;
		height: 100%;
		padding: 4.5rem 0 0.5rem;
	}
	.header_utility a {transition: color 0.25s, opacity 0.25s;}
	 .header_utility a:hover {
		color: #33b3ed;
		opacity: 0.8;
	}
}

/* ---------------------------------------------------------

	05. フッター

--------------------------------------------------------- */
footer {
	margin-top: 0rem;
}
.footer_index {
	padding: 3.0rem 0;
	position: relative;
	z-index: 0;
}
.footer-add{
	margin-top:3rem;
}
.footer_index::before {
	content: '';
	background-color: #d6f0fb;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	z-index: -1;
}

.footer_logo {
	margin-bottom: 2.0rem;
	width: 55%;
}
.footer_logo a {
	background: url(../img/logo1.png) center/contain no-repeat;
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: 18.87%;
	text-indent: 100%;
	white-space: nowrap;
}
 .footer_logo a {transition: opacity 0.25s;}
 .footer_logo a:hover {opacity: 0.7;}
 
 .footer_utility {
	margin-bottom: 3.0rem;
}
.footer_utility a {
	background-position: left center;
	background-repeat: no-repeat;
	background-size: auto 70%;
	color: #3A3A3A;
	font-size: 1.6rem;
	line-height: 2.0;
	padding-left: 1.7em;
	text-decoration: none;
}
.footer_utility a:hover{color: #33b3ed;}
.footer_shop a {background-image: url(../img/shop_icon.png);}
.footer_info a {background-image: url(../img/mail_icon.png);}
.footer_privacy a {background-image: url(../img/privacy.png);}
.footer_tokutei a{background-image:url(../img/tokutei.png);}
.footer_menu > li:not(:last-child) {display: none;}
.footer_menu a {
	color: #333;
	font-size: 1.6rem;
	text-decoration: none;
}

.footer-add img , .footer-add small{
	display:block;
	margin:0 auto;
	padding:0;
	text-align:center;
	
}
.footer-add small{
	padding-bottom:1.5rem;
	font-size:12px;
}
.footer_copyright{
	font-size: 1.2rem;
	padding: 2.0rem 0;
	text-align: center;
}
address{
	font-size: 1.2rem;
	padding-bottom: 2.0rem;
	text-align:center;
}
ul.footer_menu{
	margin-bottom:3rem;
}
ul.footer_menu p{
	margin-bottom:1.4rem;
}
/*===============================================
	フッター：768px以上
===============================================*/
@media screen and (min-width:768px) {
	footer {
		margin-top: 0rem;
	}

	.footer_index {
		display: flex;
		justify-content: space-between;
		padding: 5.0rem 0;
	}

	.footer_logo {
		margin-bottom: 2.5rem;
		width: 16.4rem;
	}

	.footer_utility {
		margin-bottom: 0;
	}
	.footer_utility a:hover {color: #33b3ed;}

	.footer_menu {
		display: flex;
		justify-content: space-between;
	}
	.footer_menu > li:not(:last-child) {display: block;}
	.footer_menu > li + li {
		margin-left: 7.0em;
	}
	.footer_menu p {
		margin-bottom: 0.6em;
	}
	.footer_menu p:not(:first-child) {
		margin-top: 1.2em;
	}
	.footer_menu a:hover {color: #33b3ed;}

	.footer_copyright {
		padding: 3.0rem 0;
	}
	ul.footer_menu{
	margin-bottom:3rem;
	margin-top:3rem;

}
}

/* ボタン：ページトップ
--------------------------------------------------------- */
.cmn_pagetop {
	background-color: #fff;
	border-radius: 50%;
	height: 4.0rem;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	bottom: 0.5rem;
	right: 1.0rem;
	transition: opacity 0.25s;
	z-index: 10;
	width: 4.0rem;
}
.cmn_pagetop.is-show {
	opacity: 1;
	pointer-events: auto;
}
.cmn_pagetop a {
	background-color: #33b3ed;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.cmn_pagetop img {
	max-width: 2.0rem;
}
.device_pc .cmn_pagetop a {transition: opacity 0.25s;}
.device_pc .cmn_pagetop a:hover {opacity: 0.8;}

/*===============================================
	ボタン：ページトップ：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.cmn_pagetop {
		height: 5.0rem;
		bottom: 1.0rem;
		right: 2.0rem;
		width: 5.0rem;
	}
}

/* ---------------------------------------------------------

	06. ホームページ

--------------------------------------------------------- */

/* ホームページ：メインビジュアル
--------------------------------------------------------- */
.home_mv {
	background: url(../img/back.jpg) center/cover no-repeat;
	height: 0;
	padding-top: 107%;
	position: relative;
	margin-bottom:0rem;
}
.home_mv_title {
	position: absolute;
	bottom: -3%;
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
}
.home_mv_title span {
	background: url(../img/h1.png) center/contain no-repeat;
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: 60%;
	text-indent: 100%;
	white-space: nowrap;
}

/*===============================================
	ホームページ：メインビジュアル：768px未満
===============================================*/
@media screen and (max-width:767px) {
	.home .modaal-video-wrap {margin: auto;}
	.home_mv2{
		position: absolute;
		bottom: -3%;
		left: 15%;
		transform: translateX(-35%);
		width: 25%;
		background: url(../img/sitaziki1.png) center/contain no-repeat;
		display: block;
		height: 0;
		overflow: hidden;
		padding-top: 20%;
		text-indent: 100%;
		white-space: nowrap;
	}
	.home_mv3{
		position: absolute;
		bottom: 30%;
		left: 5%;
		transform: translateX(-50%);
		width: 10%;
		background: url(../img/p1.png) center/contain no-repeat;
		display: block;
		height: 0;
		overflow: hidden;
		padding-top: 5%;
		text-indent: 100%;
		white-space: nowrap;
		transform:rotate(-10deg)
	}
}

/*===============================================
	ホームページ：メインビジュアル：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.home_mv_wrap {
		position: relative;
	}
	.home_mv {
		background-image: url(../img/back.jpg);
		padding-top: 40.7%;
		margin-bottom:0rem;
	}
	.home_mv_title {
		top: 0;
		bottom: auto;
		left: 1.5rem;
		transform: none;
		width: 60rem;
	}
	/*下敷き画像追加*/
.home_mv2 {
	position: absolute;
	bottom: -3%;
	left: 15%;
	transform: translateX(-50%);
	width: 25%;
	background: url(../img/sitaziki1.png) center/contain no-repeat;
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: 20%;
	text-indent: 100%;
	white-space: nowrap;
}
.home_mv3{
	position: absolute;
	bottom: 33%;
	left: 2%;
	transform: translateX(-50%);
	width: 10%;
	background: url(../img/p1.png) center/contain no-repeat;
	display: block;
	height: 0;
	overflow: hidden;
	padding-top: 5%;
	text-indent: 100%;
	white-space: nowrap;
	transform:rotate(-6deg)
}
}

/*===============================================
	ホームページ：メインビジュアル：1400px以上
===============================================*/
@media screen and (min-width:1400px) {
	.home_mv {
		height: 570px;
		padding-top: 0;
	}
}

/* TOP:楽々おぼえ～るとは
--------------------------------------------------------- */
.home_about {
	margin-top: 9rem;
	margin-bottom: 4em;
}

.home_about_img {
	margin: 0 auto;
	max-width: 75%;
	
}
.home_about p {
	line-height: 2.0;
}
.home_about p + p {
	margin-top: 1.0em;
}

/*11月12日追加*/
.midashi1{ 
	font-size:2.0rem;
	font-weight:bold;
	border-bottom:2px solid #f7b7c8;
	margin-bottom:10em;
}
.midashi2{
	background-color:#f7b7c8;

}


/*===============================================
	TOP：楽々おぼえ～るとは：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.home_about {
		margin-top: 9rem;
		margin-bottom: 6em;
		position: relative;
	}
	.home_about_title {
		font-size: 3.0rem;
	}
	.home_about_img {
		max-width: 50%;
		position: absolute;
		bottom: 0;
		right: 0;
	}
}
/* ホームページ：インデックス
--------------------------------------------------------- */
.home_index {
	margin-bottom: 10.0rem;
}
.home_index_list li {
	display: flex;
	flex-direction: column;
}
.home_index_list li + li {
	margin-top: 4em;
}
.home_index_title {
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 0.8em;
	width: 100%;
}

/*title_line*/
.home_index_title span .s1{
	font-size:4.0rem;
	margin-right: 0.25em;
	vertical-align: text-bottom;
}
.home_index_title span.s2{padding-right:15px; font-size:8.0rem;}
.home_index_products .home_index_title .s2 {color: #65cae5;}
.home_index_company .home_index_title .s2 {color: #f07191;}
.home_index_report .home_index_title .s2 {color: #f7ad6d;}
.home_index_movie .home_index_title .s2 {color: #97F281;}
.home_index_products .home_index_title span.s1{
	border-bottom:3px solid #65cae5;
	padding-right:16px;
}
.home_index_company .home_index_title span.s1{
	border-bottom:3px solid #f07191;
	padding-right:16px;
}
.home_index_report .home_index_title span.s1{
	border-bottom:3px solid #f7ad6d;
	padding-right:16px;
}
.home_index_movie .home_index_title span.s1{
	border-bottom:3px solid #97F281;
	padding-right:16px;
}
/*
.home_index_products .home_index_title .s1{border-bottom:3px solid #65cae5;}
.home_index_company .home_index_title .s1{border-bottom:3px solid #f07191;}
.home_index_report .home_index_title .s1{border-bottom:3px solid #f7ad6d;}
.home_index_movie .home_index_title .s1{border-bottom:3px solid ##97F281;}
*/

.home_index_text {
	order: 3;
}
.home_index_subtitle {
	font-feature-settings: 'palt';
	font-size: 2.0rem;
	font-weight: bold;
	line-height: 1.6;
	margin: 0.8em 0 0.5em;
}
.home_index_subtitle + p {
	line-height: 2.0;
}
.home_index_img {
	order: 2;
}

/*===============================================
	ホームページ：インデックス：768px以上
===============================================*/
@media screen and (min-width:768px) {
	.home_index {
		margin-bottom: 15.0rem;
	}
	.home_index_list li {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.home_index_list li:nth-child(even) {
		flex-direction: row-reverse;
	}
	.home_index_list li + li {
		margin-top: 5em;
	}
	.home_index_title {
		font-size: 3.5rem;
	}
	.home_index_list li:nth-child(even) .home_index_title {
		padding-left: 52%;
	}
	.home_index_title span s1{
		font-size: 8.0rem;
	}
	.home_index_text {
		order: 2;
		width: 48%;
	}
	.home_index_subtitle {
		font-size: 2.6rem;
		margin-top: 0;
	}
	.home_index_text .cmn_btn {
		text-align: left;
	}
	.home_index_img {
		order: 3;
		width: 48%;
	}
}
/* テキスト類
--------------------------------------------------------- */
.cmn_contents p {
	line-height: 2.0;
}
.cmn_contents * + p,
.cmn_contents h3 + .wp-block-columns {
	margin-top: 0.75em;
}
.cmn_contents * + ul,
.cmn_contents * + .wp-block-image,
.cmn_contents ul + .wp-block-columns {
	margin-top: 1.5em;
}
.cmn_contents p + .wp-block-columns {
	margin-top: 2em;
}
.cmn_contents h3 + p {
	margin-top: 0.8em;
}

.cmn_list li {
	line-height: 1.6;
	padding-left: 1em;
	text-indent: -1em;
}
.cmn_list li + li {
	margin-top: 0.6em;
}

.wp-block-image figcaption {
	line-height: 1.6;
}

/* ボタン インデックス
--------------------------------------------------------- */
.cmn_btn {
	margin-top: 3.0rem;
	text-align: center;
}
.cmn_btn a {
	background-color: #fff;
	border-radius: 0.6rem;
	color: #333;
	display: inline-block;
	font-weight: bold;
	line-height: 1.4;
	min-width: 27.8rem;
	padding: 1.6rem 3.0rem;
	position: relative;
	text-align: center;
	text-decoration: none;
}
.cmn_btn_products a {background-color: #65cae5;}
.cmn_btn_company a {background-color: #f07191;}
.cmn_btn_report a {background-color: #f7ad6d;}
.cmn_btn_movie a {background-color: #97F281;}
.cmn_btn a::before {
	content: '';
	border-top: 0.1rem solid #333;
	border-right: 0.1rem solid #333;
	display: block;
	height: 0.8rem;
	position: absolute;
	top: 50%;
	right: 1.2rem;
	transform: translateY(-40%) rotate(45deg);
	width: 0.8rem;
}
.device_pc .cmn_btn a {transition: opacity 0.25s;}
.device_pc .cmn_btn a:hover {opacity: 0.8;}

/* 番号リスト--------------------------

.temp_page ol {
	line-height: 1.5;
	margin-left: 2em;
}
.temp_page ol li {
	list-style: decimal;
	list-style-position: outside;
}
.temp_page ol li::marker {
	font-weight: bold;
}
--------------------------------------------------------- */

/* TOP受賞特許
--------------------------------------------------------- */
.temp_page h4 {
	background-image:url(../img/syo.svg);
	background-repeat:no-repeat;
	background-size:48px;
	background-position:0% 50%;
	font-size: 2.5rem;
	font-weight: bold;
	margin: 12rem 0 3rem;
	padding: 2rem 0 2rem 4.0rem;
}
.temp_page p{
	margin-top:0.75em;
	line-height:2.0rem;
}
.wp-block-image img {
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    padding-bottom:2rem;
}
.size-large img{
    height: auto;
    max-width: 100%;
    vertical-align: bottom;
    padding-bottom:2rem;
}

figure{
	margin:0;
	margin-top:2rem;
	margin-bottom:5rem;
	display:flex;
	flex-direction: column;
	align-items: center;
	
}

/*===============================================
	TOP：受賞特許：768px以上
===============================================*/
@media screen and (min-width:768px) {
.temp_page h4 {
	background-image:url(../img/syo.svg);
	background-position:0% 50%;
	background-size:6rem;
	font-size: 3.5rem;
	font-weight: bold;
	margin: 12rem 0 3rem;
	padding: 3.0rem 0 1.5rem 7.0rem;
	border-bottom:3px solid #C0DCF9;
}

.temp_page p{
	margin-top:2em;
	line-height:2.0rem;
}
.wp-block-image img {
    height: auto;
    max-width: 50%;
    vertical-align: bottom;
}
.size-large img{
    height: auto;
    max-width: 30%;
    vertical-align: bottom;
}
figure{
	margin:0;
	margin-top:2rem;
	margin-bottom:10rem;
	display:flex;
	flex-direction: row;
	justify-content: space-between;
}
}

/* バナーボタン
---------------------------------------------------------*/ 
.banner{
	background: url(../img/banner2.png) center/cover no-repeat;
	position: relative;
}
.btn_banner{
	position: absolute;	
	top:503px;
	left:100px;
	
}
.btn_banner img{
	position:relative;
}	

.btn_banner img:hover{
	opacity:0.9;
}
.banner,.btn_banner{
	margin:0;
	padding:0;
}
.btn_banner a{
	display:block;
}




/*===============================================
	06-01 animation効果
===============================================*/
/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:1;
}
@keyframes fadeInAnime{
from {opacity: 0;}
to {opacity: 1;}
}
.fadeInTrigger{opacity:0;}

/*下から上へ「ふわっ」*/
.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1s;
	animation:fill-mode:forwards;
	opacity:1;
}


@keyframes fadeUpAnime{
	from{
		opacity:0;
		transform: translateY(100px);
	}
		    
	to{
		opacity:1;
		transform:translateY(0);
	}
	
.fadeUpTrigger{opacity:0;}
}
/*===============================================*/


/*-----07-02ショッピングカートcart.php-----*/
.contents{
	margin-top:2.4em;
	padding:0 1.2em;
}
.inner_contents{max-width:980px;}
.center{
	margin:0 auto;
	width:100%;
}
#maincon{width:100%;}
#maincon_container{
	padding-top:0;
	padding-bottom:3em;
}
#inner_main{padding:1px 0;}
section{
	display:block;
	vertical-align: baseline;
	outline: 0;
}
.shop_page{
	color:#000;
	box-sizing: border-box;
	position: relative;
}
.page_title{margin-bottom:2em;}
.page_title h2{
	margin-bottom:10px;
	padding-top:0.4em;
	font-size:24px;
	line-height:34px;
	font-weight:400;
}
.biko{
	padding:0 15px;
	font-size:14px;
	margin:10px 0;
	line-height:22px;
}
.cart_pv{
	margin:0 5px;
	padding-bottom:0.8em;
}
.pv_title{
	margin:2.4em 0 0 0.8em;
	letter-spacing:1px;
	line-height:1.1;
}
.pv_title h3{
	font-size:16px;
	padding:10px;
	background-color:#f5f5f5;
	font-weight600;
}
/*table*/
table{
	margin-top:1em;
	border:1px solid #d6d6d6;
	border-radius:5px;
	margin-bottom:10px;
	margin-left:15px;
}
table th,table td{
	font-size:14px;
	font-weight:400;
}
.cart_footer,.continu{
	text-align:right;
}
.total{
	display:inline-block;
	border-bottom:2px solid #d6d6d6;
	margin-bottom:5px;
}
.price_box{
	padding:5px 0;
}
span.lavel1{
	display: inline-block;
	font-size:14px;
	line-height:22px;
}
span.lavel2{
	display: inline-block;
	font-size:11px;
	line-height:17px;
}
span.total_price.price {
	font-size: 22px;
	line-height: 35px;
	color: #900;
}
.continu{
	font-size: 12px;
  	line-height: 19px;
	color:#666;
	padding:10px 0;
}
.continu a img {
  height: 12px; 
  vertical-align: middle; 
  margin-right: 5px; 
}
.btn_box{
	margin: 5px 0 15px 0;
}
.form_btn{
	text-align:center;
	marign:0 auto;
	padding:20px 0;
}
.susumu{
	margin:5px;
	display:inline-block;
	line-height:1;
}
a.next_btn {
        display: block;
}
a.next_btn:hover {
    opacity: 0.8;
}
/*-----07-01ショッピングカートshop.php_logo-----*/
h1.shop_logo {
    text-align: center;
    margin:30px 0 40px 0;
}
img.shop_h1 {
    width: 60%;
}

/*-----07-01ショッピングカートshop.php&cart.php-----*/
.item_box tiled_list_box{
	margin-top: 0;
	padding: 0;
}
.flex_wrap {
	flex-wrap: wrap;
}
.flex {
	display: flex;
	justify-content: space-between;
	/*margin-bottom:50px;*/
}
.list_item_cell:not(nth-child(3n)) {
	    margin-right: 2%;
}
.layout_photo .list_item_cell {
	position: relative;
	box-sizing: border-box;
	margin-bottom:90px;
}
.list_item_cell {
	width: 32%;
}
.item_data{
	padding-bottom:42px;
	width:100%;
	box-sizing:border-box;
}
.a_border{
/*	width:95%;*/
	position:relatve;
	box-sizing:border-box;
	border:1px solid #e4e4e4;
	border-radius: 0.5em;
	font-size:85%;
}
.itemlist_box .inner_item_data {
	padding:5px;
}
.layout_photo  .list_item_photo{
	margin:0 auto;
	text-align:center;
}
.layout_photo .list_item_photo{
	padding: 5px 0;
   	 text-align: center;
}
.inner_list_item_photo{
	padding: 3px 0;
	text-align: center;
}
.inner_item_data {
    padding: 0 5px;
}
/*itemdata*/
.list_item_data{
	line-height:1.4;
	padding:5px 1px;
}
.layout_photo{
	padding:5px 1px;
	max-width: 980px;
	margin: 0 auto;
}
.item_name{
	margin-bottom:0;
	font-weight:normal;
	line-height:1.7;
	text-align:left;
	margin-left: 15px;
}
/*11.17追加*/
.left {
    text-align: left;
    margin-left: 20px;
}
.right {
    display: flex;
    justify-content: flex-end;
    align-content: stretch;
    flex-wrap: nowrap;
    margin-right: 30px;
}
.Light{
    display: flex;
    justify-content: flex-end;
    align-content: stretch;
    flex-wrap: nowrap;
    margin-right: 10px;
}
form.form_font{
	font-size:14px;
}
select.slect{
	padding: 3px;
	border-radius: 5px;
}
span.sitaziki_name{
	font-size:16px;
	margin-left:5px;
}
.cor_icon{marign:1px 0;}
.price{padding:2px 0;}
span.kakaku{font-size:16px;}
span.tax{font-size:13px;}
.sayu{
	display:flex;
	flex-direction:row;
	justify-content: space-between;
	align-items: center;
	line-height: 1.2;
}
.add{
	height:1px;
	padding-top:10px;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
}
form.see_cart_btn{
    margin: 0 0 140px 0;
    text-align: center;
}
tr:nth-child(5) {
    text-align: right;
}
.see_cart_btn:hover,.add_op:hover,.form_submit:hover,
input[type="image"]:hover, .form_back:hover{
	opacity:0.9;
}
.set_kazu {
    display: flex;
}
.set_color {
    display: flex;
    /*padding-top: 5px;*/
}
.set_right {
    display: flex;
    flex-direction:column;
}
.set_hi{
	margin:5px 0 10px 0;
}
select.c_bottom{
	margin-bottom:3px;
}
.sayu.set_hi {
    display: flex;
    align-items: flex-start;
}

/*-----07-02ショッピングカートSTEP1～STEP4-----*/

/* ---STEP1------------------------------------*/
.form_wrap,
/*.mailpoet_form*/ {
	width:1000px;
	margin:2em auto;
}
.form_wrap li,
.mailpoet_paragraph {
	padding: 24px 16px 32px;
}


.mailpoet_regist_belong .mailpoet_text_label::after {display: none;}
.mailpoet_required {display: none;}

.form_wrap input[type="text"],
.mailpoet_text,
.form_wrap input[type="email"], 
.form_wrap input[type="tel"]{
	background-color: #fff;
	border: 0.1rem solid #a3a3a3;
	border-radius:5px;
	max-width: 880px;
	padding: 0.4em;
	/*width:100%;*/
	margin-left:10px;
}

.form_select_wrap {
	max-width: 400px;
	position: relative;
}
.form_select_wrap::after {
	content: '';
	border: 11px solid transparent;
	border-top-color: #f7ad6d;
	display: block;
	height: 0;
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-25%);
	width: 0;
}

.page_confirm .form_select_wrap::after {display: none;}
.form_wrap select {
    background-color: #fff;
    border: 0.1rem solid #a3a3a3;
    border-radius: 5px;
    max-width: 880px;
    padding: 0.6em;
    margin-left:10px;
}
.form_wrap select::-ms-expand {display: none;}

.form_submit {
	display: flex;
	justify-content: center;
	margin-top: 2.5em;
}
.mailpoet_form .form_submit {
	background-color: #fff;
	border-top: none;
	margin-top: 0;
}
.form_submit input + input {
	margin-left: 4%;
}
.form_submit input,
.mailpoet_submit {
	background-color: #65CAE5;
	border: none;
	border-radius: 9.6px;
	color: #333;
	display: block;
	font-size: 28.8px;
	font-weight: bold;
	line-height: 1.4;
	padding: 25.6px 48px;
	position: relative;
	text-align: center;
	text-decoration: none;
	margin-bottom:160px;
}
.page_contact .form_submit input {
	min-width: 444.8px;
}
.form_submit .form_back {
	background-color: #ddd;
}
 .form_submit input {transition: opacity 0.25s;}
 .form_submit input:hover {opacity: 0.8;}

.jouho_title{
	width:1000px;
	background:gray;
	margin:50px auto;
	padding:10px 0 10px 30px;
}
.form_require span{
	color:red;
	width:5em;
	padding-left:0.5em;
}
.form_wrap .form_require::after,
.mailpoet_text_label::after,
h3.form_require::after{
	content: '[必須]';
	color: red;
	margin-left: 0.5em;
	width:5rem;
	padding:1.3px 2px 1.3px 2px ;
}
hr.info_hr{
    color: #d6d6d6;
    border: 0.5px solid;
}
p.form_require, p.form_siharai {
    line-height:1.6;
    border-bottom: 0.5px solid #d6d6d6;
    font-size:14px;
    padding:8px 5px;
    letter-spacing:1.2px;
}
p.imp {
    padding: 10px 10px 10px 0;
}
/*-----フォーム：768px以上-----*/
@media screen and (min-width:768px) {
	.form_wrap li,
	.mailpoet_paragraph {
		padding:5px;
		margin-left:0.8em;
		
	}
	.mailpoet_paragraph {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.form_wrap textarea {
		height: 400px;
	}

	.form_submit input {min-width: 444.8px;}
	.form_submit .form_back {min-width: inherit;}
}
.form_ec {
    margin: 5px 0 15px 0;
}
.form_next,.form_back {
    text-align: center;
    margin: auto;
    padding: 20px 0;
}
/* ---STEP2------------------------------------*/
.line-h{
	line-height:0.3;
	padding-left: 15px;
}
.t_area{
	text-align:center;
}
.t_area textarea{
	width:100%;
	height:100px;
        background-color: #fff;
        border: 0.1rem solid #d6d6d6;
        border-radius: 5px;
        /*max-width: 940px;*/
        padding: 0.6em;
}
/* ---STEP4------------------------------------*/
.kounyu {
	margin-top:30px;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align:center;
}
.kounyu p{
	font-size:26px;
	text-align:center;
	line-height:1.5;
}
.kounyu img{
	width:60%;
	margin-right:30px;
	margin-left:30px;
	margin-top:20px;
}
.touroku{
	margin:0 auto;
	font-size:17px;
	margin-top:50px;
	line-height:1.4;
	text-align:left;
	margin-bottom:80px;
	width:800px;
}
.touroku .ginkou {
	color: red; 
	text-align:center;
	margin:0 auto;
}
.kokunyu {
    text-align: center;
    align-items: center;
    margin-top: 40px;
    
}
.aisatu{
	font-size:25px;
	font-weight:600;
	padding: 20px;
}
.k_mess{
	background-color:#ffc;
	padding:30px 20px;
        font-size: 15px;
}
.w6{
	font-weight:600;
}
p.mess{
	padding:5px;
	font-size:18px;
}
/* ---STEP3------------------------------------*/
.kakunin_box{
	margin-top:2.4em;
	margin-bottom:0.8em;
}
.kakunin_ul,.kakunin_p{
	margin-left:15px;
	font-size:14px;
	line-height:22px;
	padding:15px 5px 5px 5px;
}
.kakunin_btn{
	margin-top:40px;
}
.kakunin_title{
	background-color: #f5f5f5;
	display: flex;
        justify-content: space-between;
}
.biko2 {
    padding: 0 0 0 15px;
    font-size: 14px;
    margin: 10px 0;
    line-height: 22px;
}