﻿*:not(br) {
	border:0;margin:0;padding:0;
	border-collapse:collapse;
	box-sizing: border-box;

	font-size:21px;color:#444;
	font-family: "Rounded Mplus 1c", 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-weight: 500;
	line-height: 1.8;

	vertical-align:baseline;
}

html {
	min-width:320px;
	overflow-x:hidden;
	margin:auto;
}

body {
	width:100%;
	height:100%;
}

.slider {
	margin: 120px auto 0;
	width: 100%;
	padding:20px;
}
.slick-slide {
	padding: 0 10px;
}

.slider img{
	width: 100%;
	height: auto;
	border-radius:20px;
}
.slick-prev:before,
.slick-next:before {
	color: #444;
}

.sl_img {
}

.sl_tit {
	font-size:21px;
	font-weight:bold;
	line-height:1.35;
	letter-spacing:0.03em;
	margin-top:40px;
	text-align:center;
}

.sl_com {
	line-height:1.5;
	padding: 20px 40px;
}



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

.item_box {
	width:100%;height:100%;
	max-width:1080px;
	display:block;

	background-size:cover;
	background: linear-gradient(45deg, #f7e8d5, #f4e8d8, #f7e8d5);

	position:relative;

	box-shadow: 2px 2px 10px -5px rgba(0,0,0,0.4); 

}

.item_box_inner {
	width:100%;height:100%;
	background: url('../img/item/01/back1.png'), url('../img/item/01/back1.png');
	background-position: center top, center bottom;
	background-size: auto;
	background-repeat: repeat-x;

	margin:0;padding:40px 20px;

	display:block;
}

.animation_area {
	width:100vw;
	height:100vh;

	overflow: hidden;
	position:relative;
}

.bg_black2 {
	background: url('../img/item/back.jpg');
	background-position:  center bottom;
	background-size: cover;
	background-repeat: no-repeat;
}

.anime_01-01 {
	width:95%;height:auto;
	max-width:640px;
	position:absolute;
	left:0;top:65vh;
	margin: auto;
}

.anime_01-02 {
	width:95%;height:auto;
	max-width:540px;
	position:absolute;
	left:0;top:75vh;
	margin: auto;
}

.anime_01-03 {
	width:85%;height:auto;
	max-width:640px;
	position:absolute;
	left:0;right:0;top:20px;
	margin: auto;
}

.map_shadow {
	filter:drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}

.flex_content {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: center;
}

.flex_content2 {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-between;
	align-items: top;
}

.item, .item2 {
	width: calc( 100% / 2 );
	position:relative;
	margin: 0;
}

.item2 {
	padding:10px;
	font-size:1em;
	line-height:1.35;
	vertical-align:top;
}

.item2 > .sl_tit {
	font-size:1.1em;
	margin-top:10px;
}

.item {
	padding:20px 40px;
	font-size:1em;
	line-height:1.35;
	vertical-align:middle;
}
.item span {
	font-size:0.85em;
	line-height:1.35;
}

.item h3 {
	font-size:1.4em;
	font-weight:bold;
	line-height:1.35;
	margin-bottom:20px;

	text-decoration: wavy underline #aaa 2px;
}

.item img {
	width:100%;
	max-width:540px;
	height:auto;
	vertical-align:bottom;

}

.item_sbox {
	background:#fff;
	padding:20px;
	text-align:left;
}



h2 {
	text-align:center;
	margin-bottom:40px;
}

.tit_01 {
display: block;margin:auto;
width:100%;max-width: 160px;height: auto;
padding:10px;
}

.tit_02 {
display: block;margin:auto;
width:100%;max-width: 240px;height: auto;
padding:10px;
}

h2 span {
	background: linear-gradient(transparent 70%, #a7d6ff 70%);
	font-size:42px;
	font-weight:bold;
	line-height:1.35;
	text-align:center;
	letter-spacing:0.03em;
	color:#004077;
}

.item_sbox > h3 {
  position: relative;
  padding: 5px 15px;
  color: #fff;
  border-radius: 5px;
  background: #004077;
}

.item_sbox > h3:after {
  position: absolute;
  bottom: -9px;
  left: 3em;
  width: 0;
  height: 0;
  content: '';
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #004077 transparent transparent transparent;
}


section {
	width:100%;
	padding:0;margin:0;

	position:relative;
}

.content {
	width:100%;
	max-width:1080px;
	
	padding: 160px 40px 120px;
	margin: 0 auto;

	position:relative;

}

.content2 {
	width:100%;
	max-width:1080px;
	
	padding: 40px 30px 60px;
	margin:0 auto 40px;

	position:relative;

}

.content3 {
	width:100%;
	max-width:1080px;
	
	padding: 20px 40px 60px;
	margin: 0 auto;

	position:relative;

}


.main_top_margin {
/*	margin-top:-270px;*/
	margin-top:-15%;
}
.main_top_padding {
	padding-bottom:80px;
}

.slick-prev, .slick-next {
	top:45% !important;
}

.slick-prev {
	left: 35px !important;
	z-index:1;
}
.slick-next {
	right: 35px !important;
	z-index:1;
}
.slick-prev::before, .slick-next::before {
	color:#444 !important;
}

.pc_not {
	display:none;
}


.hint {
	font-size:0.8em;
	text-align:left;
	vertical-align:middle;
}

a {color:#CCAA33;text-decoration:none;}
a.st {color:#CCAA33;font-weight:bold;}
a:link {color:#CCAA33;}
a:visited {color:#CCAA33;}
a:hover {color:#CCAA33;text-decoration:underline;}
a:active {color:#CCAA33;}

a img {transition: 0.5s ease-out;}
a img:hover{ transform: scale(1.1);}

.shadow {
            box-shadow: 0px 0px 10px -5px #666;
}

.shadow2 {
	box-shadow: 0 0 10px -3px #333;

	border-left:1px solid #ccc;
	border-right:1px solid #ccc;
}

.shadow3 {
	filter:drop-shadow(2px 2px 3px rgba(0, 0, 0, 0.8));
}

ul, li {
	list-style:none;
	margin:0;padding:0;
}

.next_button {
	margin-bottom:20px;
	font-size:1.3em;
	letter-spacing:0;
	text-align:center;
}

.next_button a {
	width:90%;max-width:640px;
	background:#C13332;color:#fff;
	border: 1px solid #C13332;
	border-radius:30px;
	padding: 5px 10px;
	display:block;
	margin: 0 auto;
}

.next_button:hover a {
	background:#fff;
	color:#C13332;
	cursor:pointer;
	text-decoration:none;
	border: 1px solid #C13332;
}

.left {text-align:left;}
.center {text-align:center;}
.right {text-align:right;}

.top {vertical-align:top;}
.middle {vertical-align:middle;}
.bottom {vertical-align:bottom;}

.bg_white {
	background:rgba(255,255,255,0.9);
}

.bg_black {
	background:rgba(0,0,0,0.3);
	color:#ffffff;
}

.bg_000 {
	background:#ffffff;
	border-radius:0 0 40px 40px;
}

.bg_001 {
	background:#ffffff;
}

.bg_002 {
	background:#feebbb;
}

.bg_003 {
	background:#eee;
}

.bg_004 {
	background: url('../img/pattern.png'), url('../img/index/004.jpg');
	background-position:  center center;
	background-size: 2px 2px, cover;
	background-repeat: repeat, no-repeat;
}


/* トップページタブ */

.tabs {
margin-top: 100%;
padding-bottom: 20px;
width: 100%;
margin: 0 auto;}

.tab_item {
width: calc(100%/3);
	padding:5px 5px 10px;
/*height: 50px;*/
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size:0.85em;
background-color: #d9d9d9;
letter-spacing:-0.1em;
/*line-height: 50px;*/
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: 800;
transition: all 0.2s ease;
cursor:pointer;
height:2.5em;
}
.tab_item:hover {
opacity: 0.75;
transform: translateY(-0.5em);
height:3em;margin-bottom:-0.5em;
}

input[name="tab_item"] {
display: none;
}

.tab_content {
display: none;
padding: 10px;
clear: both;
}

#simple:checked ~ #simple_content,
#smart:checked ~ #smart_content,
#family:checked ~ #family_content {
display: block;
}

#simple:hover + .tab_item {
background-color: #ab745a;
color: #fff;
}

#smart:hover + .tab_item {
background-color: #35b597;
color: #fff;
}

#family:hover + .tab_item {
background-color: #e2707a;
color: #fff;
}

#simple:checked + .tab_item {
background-color: #ab745a;
color: #fff;
}

#smart:checked + .tab_item {
background-color: #35b597;
color: #fff;
}

#family:checked + .tab_item {
background-color: #e2707a;
color: #fff;
}

#simple_content {border-top:5px solid #ab745a;}
#smart_content {border-top:5px solid #35b597;}
#family_content {border-top:5px solid #e2707a;}

/* トップページタブ2 */

.tabs2, .tabs3 {
margin-top: 100%;
padding-bottom: 20px;
width: 100%;
margin: 0 auto;}

.tab2_item,
.tab3_item {
width: calc(100%/2);
	padding:5px 5px 10px;
/*height: 50px;*/
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif;
font-size:0.85em;
background-color: #d9d9d9;
letter-spacing:-0.1em;
/*line-height: 50px;*/
text-align: center;
color: #565656;
display: block;
float: left;
text-align: center;
font-weight: 800;
transition: all 0.2s ease;
cursor:pointer;
height:2.5em;
}
.tab2_item:hover,
.tab3_item:hover {
opacity: 0.75;
transform: translateY(-0.5em);
height:3em;margin-bottom:-0.5em;
}

input[name="tab2_item"],
input[name="tab3_item"] {
display: none;
}

.tab2_content,
.tab3_content {
display: none;
padding: 10px;
clear: both;
}

#simple2:checked ~ #simple2_content,
#smart2:checked ~ #smart2_content,
#simple3:checked ~ #simple3_content,
#smart3:checked ~ #smart3_content {
display: block;
}

#simple2:hover + .tab2_item,
#simple3:hover + .tab3_item {
background-color: #ab745a;
color: #fff;
}

#smart2:hover + .tab2_item,
#smart3:hover + .tab3_item {
background-color: #35b597;
color: #fff;
}

#simple2:checked + .tab2_item,
#simple3:checked + .tab3_item {
background-color: #ab745a;
color: #fff;
}

#smart2:checked + .tab2_item,
#smart3:checked + .tab3_item {
background-color: #35b597;
color: #fff;
}

#simple2_content {border-top:5px solid #ab745a;}
#smart2_content {border-top:5px solid #35b597;}
#simple3_content {border-top:5px solid #ab745a;}
#smart3_content {border-top:5px solid #35b597;}





.font_white, .font_white * {
	color:#ffffff;
}

.sp_left {
	text-align:center;
}

.p_none {padding:0;}
.p_10 {padding:10px}
.p_20 {padding:20px 10px}
.p_20x {padding:20px;}
.p_2040 {padding:20px 40px;line-height:1.5;}

.round {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.tab {display:table;table-layout:fixed;}
.tab2 {display:table;table-layout:fixed;}
.tab_full {width:100%;display:table-cell;}
.tab_split75 {width:75%;display:table-cell;}
.tab_split66 {width:66.66%;display:table-cell;}
.tab_split60 {width:60%;display:table-cell;}
.tab_half {width:50%;display:table-cell;}
.tab_split40 {width:40%;display:table-cell;}
.tab_split33 {width:33.33%;display:table-cell;}
.tab_split25 {width:25%;display:table-cell;}
.tab_split20 {width:20%;display:table-cell;}
.tab_split16 {width:16.66%;display:table-cell;}

.w_full {
	width:100%;
	max-width:1080px;
	margin:0 auto;
}
.w_960 {
	width:100%;
	max-width:960px;
	margin:0 auto;
}
.w_720 {
	width:100%;
	max-width:720px;
	margin:0 auto;
}


hr.line_001 {
	width:100%;height:1px;
	border:0;margin:20px auto;
	background:#444;
}

p, .p_br {
	margin-bottom:20px;
}

.cont_01 { order:1;}
.cont_02 { order:2;}
.cont_03 { order:3;}
.cont_04 { order:4;}
.cont_05 { order:5;}
.cont_06 { order:6;}
.cont_07 { order:7;}
.cont_08 { order:8;}
.cont_09 { order:9;}
.cont_10 { order:10;}



.main_view {
width:75%;max-width:880px;height:auto;
position:absolute;
left:0;right:0;
bottom:10%;
margin:auto;
}
.catch1 {
width:75%;max-width:880px;height:auto;
position:absolute;
left:0;right:0;
bottom:20%;
margin:auto;
}
.catch2 {
width:75%;max-width:880px;height:auto;
position:absolute;
left:0;right:0;
bottom:5%;
margin:auto;
}

.w_wide {
width:100%;height:auto;
}
h3.h3_tit {
font-size: 1.4em;
font-weight: bold;
line-height: 1.35;
margin-bottom: 20px;
text-decoration: wavy underline #aaa 2px;
text-align:center;
}

@media only screen and (max-width: 719px) {

.main_view {
width:95%;max-width:880px;height:auto;
bottom:30%;
}

.catch1 {
width:100%;max-width:880px;height:auto;
position:absolute;
left:0;right:0;
bottom:18%;
margin:auto;
}
.catch2 {
width:100%;max-width:880px;height:auto;
position:absolute;
left:0;right:0;
bottom:0;
margin:auto;
}


*:not(br) {
	font-size:16px;
}

body {
	background: none;
	overflow-x:hidden;
}

.animation_area {
/*	height:100vh;
	background: url('https://gigaplus.makeshop.jp/sawadafoods/lp_post/img/pattern.png'), url('https://gigaplus.makeshop.jp/sawadafoods/lp_man/back_sp.webp');
	background-size: 2px 2px, cover;
	background-position: center top;
	background-repeat: repeat, no-repeat;
	background-attachment:fixed;
	z-index:-1;
	margin-bottom:-100px;*/
}
.anime_01-03 {
/*	top:5vh;*/
}

.anime_01-01 {
	top:60%;
	width:70%;height:auto;
	max-width:640px;
}
.anime_01-02 {
	top:72%;
	width:60%;height:auto;
	max-width:540px;
}

.item_box_inner {
	padding: 40px 0;
}

.main_top_margin {
	margin-top:-60px;
}
.main_top_padding {
	padding-left:20px;
	padding-right:20px;
}

.slider {
	margin: 0 auto 0;
}

h2 {
	margin-bottom:20px;
}

h2 span {
	font-size:1.5em;
}

.content {
	padding: 40px 0 40px;
}

.content2 {
	padding: 20px 0 30px;
}

.content3 {
	padding: 20px 0 40px;
}

.slider {
	padding:0;
}

.slider .sl_com {
	line-height:1.5;
	padding: 10px;
}

#toggle {
	width:80px;height:80px;
	display: table-cell;
	color: #222;
	font-size:0.8em;
	font-weight:600;
	letter-spacing:-0.1em;
	
	padding:5px;
	margin:0 auto;
	border-left:1px solid #f9f9f9;

	text-align: center;
	text-decoration: none;
	cursor:pointer;
}

#toggle span {
	font-size:4em;
	color: #887451;
	line-height:100%;
}

#menu {
	list-style:none;
}

#menu li {
	width:100%;
	border-top:1px solid #f9f9f9;
	text-align:center;
}

#menu li:first-child {
	border-top:none;
}

#menu li a span {
	font-size:1em;
	color:#fff;
}

#menu li a {
	width:100%;
	font-size:1.3em;
	color:#fff;
	padding:5px 10px;
	display:inline-block;
}

#menu li:hover * {
	color:#666;
	background:#eee;
}

.sp_not {
	display:none;
}
.pc_not {
	display:inline;
}

.sp_left {
	text-align:left;
}


.tab > div {
	width:100%;
	display:block;
}

.flex_content {
}
.item {
	width: 100%;
}

.item h3 {
	text-align:center;
}

.cont_01 { order:2;}
.cont_02 { order:1;}
.cont_03 { order:3;}
.cont_04 { order:4;}
.cont_05 { order:6;}
.cont_06 { order:5;}
.cont_07 { order:7;}
.cont_08 { order:8;}
.cont_09 { order:10;}
.cont_10 { order:9;}


}
