@charset "utf-8";
/* CSS Document */

/* スマホ用スタイルシート */
@media screen and (max-width: 640px) {

/** -------------------------------------
	テーマのスタイルを削除・変更
------------------------------------- **/


/** -------------------------------------
	共通設定
------------------------------------- **/
	body {
		margin: 80px 0 0;
	}
	
	/* 見出し */
	h2, .entry-content h2, .entry-summary h2, .comment-content h2, .textwidget h2 {
		margin: 0 0 20px;
	}
	
	/* 複数カラム */
	.column {
		display: block;
	}
	
	.column div {
		margin: 0 0 15px;
	}
	
	.column3 div {
		width: 100%;
	}
	
	.column73 , .column64 {
		display: block;
	}
	
	.column73 div.box {
		width: 100%;
	}
	.column73 div.box + div.box {
		width: 100%;
	}

	.column64 div.box {
		width: 100%;
	}
	.column64 div.box + div.box {
		width: 100%;
	}
	
	/* 寄せ */
	.sp-ta-center {
		text-align: center;
	}
	
	/*-- 固定ボタン お問い合わせ --*/
	.btn-contact {
		bottom: 0;
		top: auto;
		transition: ease 1s;
		width: 100%;
	}
	.btn-contact.disnone {
		right: 0;
		bottom: -70px;
		transition: ease 1s;
	}
	
	.btn-contact a {
		background-position: 30% 50%;
		font-size: 18px;
		padding: 15px 0;
		text-align: center;
	}
	
	/*-- PC・スマホでのみ表示 --*/
	.pc-on {
		display: none;
	}
	
	.sp-on {
		display: block;
	}
	
	/* スマホの時のみ100% */
	.sp-100per {
		width: 100%;
	}


/** -------------------------------------
	ヘッダー
------------------------------------- **/
	.site-header {
		padding: 15px;
	}
	
	/*-- メニュー --*/
	.headerMenu {
		display: none;
		top: 60px;
		right: 0;
		width: 70%;
	}
	
	.headerMenu ul {
		background: #fff;
		display: block;
	}
	
	.headerMenu ul li {
		margin: 0 20px;
	}
	.headerMenu ul li + li {
		border-top: dashed 1px #1873b3;
	}
	
	.headerMenu ul li::after {
		display: none;
	}
	
	.headerMenu ul li a {
		display: block;
		padding: 10px;
	}
	
	/*-- メニューボタン --*/
	.menu-toggle {
		border: none;
		display: block;
		margin: 0;
		padding: 0;
	}
	
	.menu-toggle span {
		background: #1873b3;
		display: block;
		height: 4px;
		width: 100%;
		transition: ease .5s;
	}
	.menu-toggle span:nth-child(2), .menu-toggle span:nth-child(3) {
		position: absolute;
	}
	.menu-toggle span:nth-child(2) {
		top: 11px;
	}
	.menu-toggle span:nth-child(3) {
		top: 22px;
	}
	
	.menu-toggle p {
		color: #000;
		margin: 22px 0 0;
	}
	
	/* メニューボタンクリックしたとき */
	.menu-toggle.toggled-on, .menu-toggle.toggled-on:hover, .menu-toggle.toggled-on:focus {
		background-color: transparent;
		border: none;
		color: #000;
	}
	
	.menu-toggle.toggled-on span:nth-child(1) {
		transform: translateX(200%);
		transition: ease .2s;
	}

	.menu-toggle.toggled-on span:nth-child(2) {
		top: 8px;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		transform: rotate(-45deg);
		transition: ease .5s;
	}

	.menu-toggle.toggled-on span:nth-child(3) {
		top: 8px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		transform: rotate(45deg);
		transition: ease .5s;
	}
	
	/*-- 電話番号 --*/
	header .headerTel {
		display: none;
	}

/** -------------------------------------
	フッター
------------------------------------- **/
	/*-- PAGE TOP --*/
	footer .pageTop {
		padding: 15px 0 20px;
	}
	
	/*-- COMPANY --*/
	footer .company {
		padding: 30px 0;
	}
	
	footer .company .inner {
		margin: 0 15px;
	}
	
	footer .company .inner .column {
		margin: 0 0 30px;
	}
	
	footer .company .image {
		margin-right: 15px;
		text-align: center;
	}
	
	footer .company .text {
		padding: 0 0 55px;
		text-align: center;
	}
	
	footer .company .name {
		font-size: 15px;
		margin: 0 0 10px;
	}
	
	footer .company .btn {
		display: table;
		font-size: 14px;
		left: 50%;
		transform: translatex(-50%);
	}
	
	footer .company .prof {
		font-size: 13px;
	}
	
	/*-- フッターナビ --*/
	.site-footer .main-navigation {
		display: none;
	}
	
	/*-- コピーライト --*/
	footer .site-info .copyright {
		margin: 10px 15px 30px;
	}
	
	/** -------------------------------------
		main　コンテンツ
	------------------------------------- **/
	/* パンくず */
	#breadcrumb {
		margin: 0 auto 20px;
		width: 94%;
	}

/** -------------------------------------
	トップページ
------------------------------------- **/
	/*-- スライダー --*/
	#topPage .swiper-slide {
		height: 300px;
		overflow: hidden;
	}
	
	#topPage .swiper-slide p {
		font-size: 24px;
		font-weight: bold;
		top: 25px;
		left: 20px;
	}
	
	#topPage .swiper-slide img {
		left: 60%;
		transform: translate(-50%, -50%);
		width: 160%;
	}
	
	/*-- スライダー下 --*/
	#topPage .underSlide {
		padding: 30px 0;
	}
	
	#topPage .underSlide .inner {
		display: block;
	}
	
	#topPage .underSlide h2 {
		font-size: 20px;
	}
	#topPage .underSlide h2 em {
		font-size: 20px;
	}
	
	#topPage .underSlide p {
		font-size: 15px;
		line-height: 1.4;
	}
	
	/* 共同開発企業 */
	#topPage .underSlide .joint {
		padding: 15px;
		width: 100%;
	}
	
	#topPage .underSlide .joint .column2 {
		flex-wrap: nowrap;
	}
	
	#topPage .underSlide .joint  img {
		vertical-align: middle;
	}
	
	/*-- 科学的根拠のある～ --*/
	#topPage .explanation h3 {
		font-size: 23px;
		line-height: 1.5;
		margin: 0 23px 30px;
	}
	
	#topPage .explanation .column {
		display: none;
	}
	
	#topPage .explanation .text {
		font-size: 15px;
		line-height: 1.4;
		margin: 0 30px;
	}
	
	/*-- アピールポイント（職人技、独自性、使いやすさ） --*/
	#topPage .appeal .box1, #topPage .appeal .box2 {
		display: block;
	}
	
	#topPage .appeal .image, #topPage .appeal .desc {
		width: 100%;
	}
	
	#topPage .appeal .image {
		height: 200px;
		margin: 0;
	}
	
	#topPage .appeal .desc {
		margin: 0;
	}
	
	#topPage .appeal .desc .inner {
		margin: 0 auto;
		position: static;
		transform: translate(0, 0);
		width: 90%;
	}
	
	#topPage .appeal .desc h2 {
		background: url(img/icon-arrow2.png) no-repeat 100% 50%;
		background-size: 25px;
		cursor: pointer;
		font-size: 24px;
		margin: 0;
		max-width: initial;
		padding: 20px 0;
		transition: ease .5s;
		width: 100%;
	}
	#topPage .appeal .desc h2::before, #topPage .appeal .desc h2::after {
		font-size: 34px;
		top: 15px;
	}
	#topPage .appeal .desc h2::before {
		left: 10%;
	}
	#topPage .appeal .desc h2::after {
		right: 10%;
	}
	
	#topPage .appeal .desc h2.open {
		background: url(img/icon-arrow3.png) no-repeat 100% 50%;
		background-size: 25px;
		transition: ease .5s;
	}
	
	#topPage .appeal .desc p {
		display: none;
		font-size: 15px;
		padding: 0 0 25px;
	}
	
	#topPage .appeal .image img {
		vertical-align: middle;
	}
	
	/*-- PRODUCT --*/
	#topPage .product {
		margin: 0 0 50px;
		padding: 40px 0 20px;
	}
	
	#topPage .product .inner {
		margin: 0 15px;
	}
	
	#topPage .product .inner .column3 {
		margin: 0 0 10px;
	}
	
	#topPage .product .inner .column3 div {
		width: 100%;
	}
	
	#topPage .product h3 {
		margin: 0 0 20px;
	}
	
	#topPage .product a {
		font-size: 16px;
		margin: 0 0 20px;
	}
	
	/*-- FAQ --*/
	#topPage .faq {
		padding: 40px 0;
	}
	
	#topPage .faq .inner {
		margin: 0 15px;
		padding: 20px 0;
		width: auto;
	}
	
	/* タブボタン */
	#topPage .faq .tabBtn {
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: space-between;
		justify-content: space-between;
		margin: 0 15px 10px;
		width: auto;
	}
	
	#topPage .faq .tabBtn li:nth-child(1), #topPage .faq .tabBtn li:nth-child(2) {
		flex: 2;
	}
	#topPage .faq .tabBtn li:nth-child(3) {
		width: auto;
	}
	#topPage .faq .tabBtn li + li {
		margin-left: 5px;
	}
	
	#topPage .faq .tabBtn li a {
		font-size: 16px;
		padding: 10px 5px;
	}
	
	/* タブで開いた中身 */
	#topPage .faq .box {
		margin: 0 15px;
		width: auto;
	}
	
	#topPage .faq .list a {
		font-size: 16px;
		line-height: 1.4;
		padding: 15px 25px 15px 35px;
	}
	
	#topPage .faq .list a::before {
		line-height: 30px;
		width: 30px;
	}
	
	#topPage .faq .list a::after {
		font-size: 28px;
		line-height: 1.0;
	}
	
	#topPage .faq .list p {
		font-size: 14px;
		line-height: 1.4;
		margin: 0 10px 20px 35px;
	}
	
	/*-- CONTACT --*/
	.contact {
		padding: 50px 0;
	}
	
	.contact .box {
		border: none;
		margin: 0 10px;
		padding: 20px 15px;
		width: auto;
	}
	
	.contact .tel {
		margin: 10px 25px 0;
	}
	
	.contact .tel p {
		font-size: 15px;
		line-height: 1.4;
		margin: 10px 0;
	}
	
	.contact .tel a {
		border: none;
	}
	
	input[type="text"], input[type="email"], input[type="tel"], textarea {
		box-sizing: border-box;
		width: 100%;
	}
	
	/*-- INFORMATION --*/
	#topPage .information {
		padding: 40px 0;
	}
	
	#topPage .information .list dl {
		padding: 20px 15px;
	}
	
	#topPage .information .list dl dt {
		font-size: 16px;
	}
	
	#topPage .information .list dl dd {
		font-size: 15px;
		line-height: 1.4;
	}
	
	/*-- NEWS --*/
	#topPage .news {
		margin: 50px 15px;
	}
	
	#topPage .news .column3 {
		display: block;
	}
	
	#topPage .news .column3 div {
		margin: 0 0 20px;
		width: 100%;
	}
	
	#topPage .news .column3 div iframe {
		display: table;
		margin: 0 auto;
	}
	
/** -------------------------------------
	商品ページ
------------------------------------- **/
	/* 見出し */
	.entry-content h1 {
		font-size: 21px;
		margin: 0 0 20px;
		padding: 0 0 20px;
	}
	
	.entry-content .itemDetail h2 {
		font-size: 30px;
	}
	
	.entry-content h3 {
		font-size: 21px;
	}
	
	.entry-content .itemDetail h4 {
		font-size: 24px;
	}
	
	/*-- ボタン --*/
	.single-item .btn {
		
	}
	
	/*-- 商品詳細 --*/
	.itemDetail {
	}
	
	.itemDetail p {
		font-size: 15px;
	}
	
	.itemDetail .block {
		margin: 30px 0;
	}
	
	.itemDetail .column2 div {
		margin: 0 0 20px;
		width: 100%;
	}
	
	/* 特長 */
	.itemDetail .feature {
		line-height: 35px;
		width: auto!important;
	}
	
	.itemDetail .feature p {
		font-size: 18px;
	}
	
	.itemDetail .feature span {
		font-size: 24px;
	}
	
	/* 青色のボックス */
	.itemDetail .box-blue {
		padding: 15px;
	}
	
	/* シール */
	.itemDetail .seal p {
		border-radius: 0;
		font-size: 20px;
		font-weight: normal;
		padding: 10px;
		height: auto;
		width: auto;
	}
	
	/* アイシングセルのボタン */
	.itemDetail .btn-icing {
		margin: 30px 15px;
	}
	
	.itemDetail .btn-icing p {
		font-size: 18px;
		line-height: 1.4;
		margin: 15px 120px 15px 15px;
		padding: 0 0 0 30px;
	}
	
	.itemDetail .btn-icing img {
		right: -5px;
		top: 50%;
		width: 120px;
	}
	
	/* アイスベスト */
	.itemDetail .btn-iceVest {
		
	}
	
	.itemDetail .btn-iceVest p {
		font-size: 18px;
		line-height: 1.4;
		margin: 15px 100px 15px 15px;
	}
	
	.itemDetail .btn-iceVest img {
		right: -30px;
		width: 40%;
	}
	
	/* ポイント */
	.itemDetail .point {
		font-size: 15px;
	}
	
	.itemDetail .point::before {
		top: -24px;
	}
	
	/* 装着の仕方  流れ */
	.itemDetail .column2.flow div.box,
	.itemDetail .column3.flow div.box,
	.itemDetail .column2.flow div.box2:last-child {
		width: 100%;
	}
	
	.itemDetail .flow div.box::after {
		background: url(img/icon-arrow3.png) no-repeat 0 0;
		background-size: cover;
		content: '';
		display: table;
		margin: 15px auto;
		height: 30px;
		width: 76px;
	}
	
	.itemDetail .flow div.box:last-child::after {
		display: none;
	}
	
	.itemDetail .flow div.image {
		margin: 0 0 15px;
		text-align: center;
	}
	
	.itemDetail .flow div.image::after {
		display: none;
	}
	
	.itemDetail .flow p {
		margin: 15px 0;
	}
	
	.itemDetail .flow .point {
		margin: 30px 0 0!important;
	}
	
	/*-- 装着動画 --*/
	.movie h2 {
		font-size: 30px;
	}
	
	.movie iframe {
		height: 200px;
		width: 94%;
	}
	
	/*-- 利用者のコメント --*/
	.comment {
		padding: 20px 15px;
	}
	
	.comment h2 {
		font-size: 30px;
	}
	
	.comment .column {
		display: block;
	}
	
	.comment dl, .comment .column dl {
		box-sizing: border-box;
		margin: 0 0 15px;
		width: 100%;
	}
	
	.comment .column dl + dl {
		margin: 0 0 15px;
	}
	
	.comment dl dd {
		font-size: 15px;
	}
	
	/*-- 商品情報 --*/
	.itemInfo {
		margin: 0 auto;
	}
	
	.itemInfo .column {
		display: -webkit-flex;
		display: flex;
		margin: 0;
	}
	
	.itemInfo .column div {
		margin: 0;
	}
	
	.itemInfo .table {
		overflow: scroll;
	}
	
	.itemInfo .inner {
		min-width: 700px;
	}
	
	.itemInfo dl {
		margin: 0;
		width: 100%;
	}
	
	.itemInfo dl.grow2 {
		min-width: 200px;
	}
	
	.itemInfo dl dt, .itemInfo dl dd {
		font-size: 15px;
	}
	
	.itemInfo dl dt.row2, .itemInfo dl dd.row2 {
		padding: 48px 0;
	}
	
	.itemInfo dl dd.row3 {
		padding: 76px 0;
	}
	
	.itemInfo p {
		font-size: 14px;
	}
	
	/*-- ダウンロード --*/
	.download {
		display: block;
		margin: 0 15px 50px;
	}
	
	.download div {
		margin: 0 0 15px;
		width: 100%;
	}
	
	.single-item .btn-flyer {
		padding: 20px;
	}
	
	.single-item .btn-flyer p {
		font-size: 20px;
		line-height: 1.4;
	}
	
	.single-item .btn-flyer img {
		right: 20px;
	}
	
	/*-- 購入はコチラ --*/
	.purchase {
		padding: 30px 15px;
	}
	
	.purchase .column {
		display: block;
	}
	
	.purchase .column div {
		width: 100%;
	}
	
	.btn-form {
		margin: 0 0 10px;
		padding: 20px 100px 20px 15px;
	}
	
	v p {
		font-size: 20px;
		padding: 0 30px;
	}
	
	.btn-form p span {
		font-size: 15px;
	}
	
	.btn-form img {
		right: -100px;
	}
	
	.btn-rakuten img {
		right: 10px;
		width: 100px;
	}
	
	/** -------------------------------------
		会社概要
	------------------------------------- **/
	/* 見出し */
	.profile h1 {
		
	}
	
	/* ブロック */
	.profile .block {
		margin: 0 auto 50px;
		width: 92%;
	}
	
	/* 地図 */
	.profile .placeMap {
		width: 100%;
	}
	
	/* em */
	.profile p em {
		font-size: 21px;
	}
	
	/** -------------------------------------
		プライバシーポリシー
	------------------------------------- **/
	.profile ol {
		margin-left: 0;
	}
	
	/* 付記 */
	.appendices {
		padding: 20px;
	}
	
	/** -------------------------------------
		カテゴリ別投稿一覧
	------------------------------------- **/
	.blogList {
		padding: 50px 0;
	}
	
	.blogList .inner a {
		margin: 0 0 30px;
		width: 100%;
	}
	
	.blogList .inner a:nth-child(3n-1), .blogList .inner a:nth-child(3n) {
		margin-left: 0;
	}
	
	.blogList .inner a:last-child {
		margin: 0;
	}
	
	/** -------------------------------------
		部位別カテゴリ別投稿一覧
	------------------------------------- **/
	.bloglist-part h1 {
		margin: 0 auto 20px;
		width: 94%;
	}
	
	/** -------------------------------------
		業種別カテゴリ別投稿一覧
	------------------------------------- **/
	.industryCat .catHeader div {
		width: 100%;
	}
	
	.industryCat .catImage {
		margin: 0 0 20px;
	}
	
	.industryCat .catName {
		font-size: 40px;
		margin: 0 0 10px;
	}


} /* スマホ用スタイルシート終了 */