@charset "utf-8";

/* スタイルシート

作成者：Hirama Inc.
作成日 : 2022.02.21
-------------------------------------------------------------------------------------*/

.home {}

/*************************************************************************************
**************************************************************************************

mainvisual

**************************************************************************************
**************************************************************************************/

#mainvisual {
width: 100%;
position: relative;
background-image: url(../images/main_bg.jpg);
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
}

@media only screen  and (min-width: 701px){
#mainvisual {
height: 100vh;
}
}

@media only screen  and (max-width: 700px){
#mainvisual {
height: auto;
margin-top: 5rem;
}
}

/*==================================================
スライダーのためのcss
===================================*================*/

.slider {
width:100%;
margin:0 auto;
}

@media only screen  and (min-width: 701px){
.slider {
transform: translate(-50%, -35%);
top: 35%;
left:50%;
}
}

@media only screen  and (max-width: 700px){
.slider {
transform: translate(-50%, 0);
top: 0;
left:50%;
}
}

.slider img {
height:auto;
}

@media only screen  and (min-width: 701px){
.slider img {
width:65vw;
}
}

@media only screen  and (max-width: 700px){
.slider img {
width:100vw;
}
}

.slider .slick-slide {
transform: scale(0.7);
transition: all .5s;
opacity: 0.8;
position:relative;
}

@media only screen  and (min-width: 701px){
.slider .slick-slide {
transform: scale(0.7);
}
}

@media only screen  and (max-width: 700px){
.slider .slick-slide {
transform: scale(1);
}
}

.slider .slick-slide::before {
content: "";
display: block;
width: 100%;
height: 100%;
background:rgba(0,0,0,0.2); 
position: absolute;
left: 0;
top: 0;
}

.slider .slick-slide.slick-center{
transform: scale(1);/*中央の画像のサイズだけ等倍に*/
opacity: 1;/*透過なし*/
}

.slider .slick-slide.slick-center::before {
background:rgba(0,0,0,0); 
z-index: -1;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
position: absolute;/*絶対配置にする*/
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
z-index: 99;
}

@media only screen  and (min-width: 701px){
.slick-prev, 
.slick-next {
top: 42%;

/*
border-top: 4px solid #FFF;
border-right: 4px solid #FFF;
height: 2rem;
width: 2rem;
*/

}
}

@media only screen  and (max-width: 700px){
.slick-prev, 
.slick-next {
top: 48%;

/*
border-top: 3px solid #FFF;
border-right: 3px solid #FFF;
height: 1.5rem;
width: 1.5rem;
*/
}
}

.slick-prev {/*戻る矢印の位置と形状*/
/*transform: rotate(-135deg);*/
}

@media only screen  and (min-width: 701px){
.slick-prev {
left: 4rem;
}
}

@media only screen  and (max-width: 700px){
.slick-prev {
left: 2rem;
}
}

.slick-next {/*次へ矢印の位置と形状*/
/*transform: rotate(45deg);*/
}

@media only screen  and (min-width: 701px){
.slick-next {
right: 4rem;
}
}

@media only screen  and (max-width: 700px){
.slick-next {
right: 2rem;
}
}

slick-prev, .slick-next {
font-size: 0;
line-height: 0;
display: block;
padding: 0;

-webkit-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}

.slick-prev:before, .slick-next:before {
font-family: 'FontAwesome';
font-size: 40px;
line-height: 1;
/*
background: rgba(255,255,255,0.5);
*/
opacity: .75;
color: white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

.slick-prev:before {
content: '\f137';
}

.slick-next:before {
content: '\f138';
}

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
color: transparent;
outline: none;
background: transparent;
}

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
opacity: .25;
}



/*ドットナビゲーションの設定*/

.slick-dots {
text-align:center;
margin:20px 0 0 0;
}

.slick-dots li {
display:inline-block;
margin:0 5px;
}

.slick-dots button {
color: transparent;
outline: none;
width:4px;/*ドットボタンのサイズ*/
height:4px;/*ドットボタンのサイズ*/
display:block;
background:#ccc;/*ドットボタンの色*/
}

.slick-dots .slick-active button{
background:#333;/*ドットボタンの現在地表示の色*/
}

.slider__item {
 opacity: 0.34;
 transition: opacity 0.4s;
}
.slick-slide.slick-current .slider__item,
.slick-slide.is-active-next .slider__item {
 opacity: 1;
}


/*==================================================
ticker
===================================*================*/

/*new*/
#mainvisual .hours {
background:rgba(235, 235, 235,.9);
/*z-index: 999;*/
z-index: 1;
display: block;
}

@media only screen and (min-width: 701px){
#mainvisual .hours {
width: 94%;
position: absolute;
left: 3%;
bottom:6rem;
height: 3rem;
}
}

@media only screen and (max-width: 700px){
#mainvisual .hours {
width: 100%;
height: 3rem;
padding: 0 0;
}
}

#mainvisual .hours .inside {
width: 100%;
height: 3rem;
position: relative;
}

@media only screen and (max-width: 480px){
#mainvisual .hours .inside {
margin-right: 1rem;
}
}

#mainvisual .hours .opentime {
position: absolute;
left: 0;
bottom: 0;
height: 3rem;
background-color: #39B4BE;
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-box-pack: center;	-webkit-justify-content: center;	-ms-flex-pack: center;	justify-content: center;
-webkit-box-align: center;	-webkit-align-items: center;	-ms-flex-align: center;	align-items: center;
}

@media only screen and (min-width: 481px){
#mainvisual .hours .opentime {
width: 15rem;
}
}

@media only screen and (max-width: 480px){
#mainvisual .hours .opentime {
width: 10rem;
font-size: .7rem;
}
}

#mainvisual .hours .opentime span {
color: #FFF;
}

#mainvisual .hours .textarea {
position: absolute;
left: 0;
right: 0;
}

.ticker {
height: 3rem;
}

@media only screen and (min-width: 481px){
.ticker {
padding:0 0 0 16rem;
}
}

@media only screen and (max-width: 480px){
.ticker {
padding:0 0 0 10.5rem;
}
}

.ticker li {
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-box-align: center;	-webkit-align-items: center;	-ms-flex-align: center;	align-items: center;
font-size: .8rem;
height: 3rem;
overflow: hidden;
padding: 0 0 0 0;
line-height: 1.5;
width: 100% !important;
}

@media only screen and (min-width: 481px){
.ticker li {
}
}

@media only screen and (max-width: 480px){
.ticker li {
font-size: .7rem;
}
}

.ticker li {
 /*display: none; /*読み込み時は非表示*/
}

.bx-viewport .ticker li {
 /*display: flex !important; /*JSが読み込まれたら表示*/
}

.ticker li a:hover {
text-decoration: underline;
}

/*old*/
#mainvisual .hours .obi {}

@media only screen  and (min-width: 1151px){
#mainvisual .hours .obi {
max-width: 1100px;
}
}

@media only screen  and (max-width: 1150px){
#mainvisual .hours .obi {
padding: 0 3%;
}
}

@media only screen  and (min-width: 701px){
#mainvisual .hours .obi {
width: 100%;
height: 100%;
margin: 0 auto;
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-box-pack: center;	-webkit-justify-content: center;	-ms-flex-pack: center;	justify-content: center;
-webkit-box-align: center;	-webkit-align-items: center;	-ms-flex-align: center;	align-items: center;
}
}

@media only screen  and (max-width: 700px){
#mainvisual .hours .obi {
}
}

#mainvisual .hours .obi li {
position: relative;
}

@media only screen  and (min-width: 701px){
#mainvisual .hours .obi li {
padding: 0 1.5rem;
}
}

@media only screen  and (max-width: 700px){
#mainvisual .hours .obi li {
width: 100%;
text-align: center;
}
}

#mainvisual .hours .obi li img {
min-height: 0;
}

#mainvisual .hours .obi li + li::before {}

@media only screen  and (min-width: 701px){
#mainvisual .hours .obi li + li::before {
content: "";
width: 2px;
height: 100%;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color:#3DBCC6;
}
}

@media only screen  and (max-width: 700px){
#mainvisual .hours .obi li + li::before {
}
}

@media only screen  and (max-width: 700px){
.bx-wrapper {
position: absolute;
left: 0;
top: calc(100% - 9rem);
-ms-touch-action: pan-y;
touch-action: pan-y;
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow:transparent;
border:none;
background:transparent;
}
}

#mainvisual .hours .obi li img {}

@media only screen  and (max-width: 700px){
#mainvisual .hours .obi li img {
display: inline-block;
margin: 0 auto;
}
}

/*************************************************************************************
**************************************************************************************

scrollify

**************************************************************************************
**************************************************************************************/

/*========= ページネーションCSS ===============*/

.pagination {
	position:fixed;
	right:20px;
	top: 50%;
 transform: translateY(-50%);
	font-size:1em;
	z-index: 10;
	list-style: none;
}

@media only screen  and (min-width: 701px){
.pagination {
}
}

@media only screen  and (max-width: 700px){
.pagination {
display: none;
}
}

.pagination a {
	display:block;
	height:20px;
	margin-bottom:5px;
	color:#39B4BE;
	position:relative;
	padding:4px;
}

.pagination a.active:after {
	box-shadow:inset 0 0 0 5px;
}

/*現在地表示のテキストの設定*/
.pagination a .hover-text {
	position:absolute;
	right:15px;
	top:0;
	opacity:0;
	-webkit-transition: opacity 0.5s ease;
	transition: opacity 0.5s ease;
	padding-right: 15px;
 display: none;
}

.pagination a:hover .hover-text {
	opacity: 0;
 display: none;
}

.pagination a:after {
	-webkit-transition:box-shadow 0.5s ease;
	transition:box-shadow 0.5s ease;
	width:10px;
	height:10px;
	display: block;
	border:1px solid;
	border-radius:50%;
	content:"";
	position: absolute;
	margin:auto;
	top:0;
	right:3px;
	bottom:0;
}

/*現在地表示のテキストを非表示*/
	.pagination a .hover-text{
/*display: none;*/
}	

.panel {}

@media only screen  and (min-width: 701px){
.panel {
padding-top: 5rem;
/*height: 100vh !important;*/
height: 100vh !important;
}
}

@media only screen  and (max-width: 700px){
.panel {

}
}

#panel3 {
background-color:transparent;
background-size: 16px 16px;
background-position:  0 0, 8px 8px;
width: 100%;
background-image:
radial-gradient(#E1F3F6 20%, transparent 23%),
radial-gradient(#E1F3F6 20%, transparent 23%);
}



/*************************************************************************************
**************************************************************************************

main

**************************************************************************************
**************************************************************************************/

.home #main {}

.home #main .block {
width: 100%;
height: 100%;
}

@media only screen  and (min-width: 1151px){
.home #main .block {
padding: 2rem 0;
}
}

@media only screen  and (min-width: 701px)  and (max-width: 1150px){
.home #main .block {
padding: 2rem 0;
}
}

@media only screen  and (min-width: 481px)  and (max-width: 700px){
.home #main .block {
padding: 2.25rem 0;
}
}

@media only screen and (max-width: 480px){
.home #main .block {
padding: 2rem 0;
}
}

.home #main .outer {
width: 100%;
}

@media only screen  and (min-width: 701px){
.home #main .outer {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
}

@media only screen  and (max-width: 700px){
.home #main .outer {
}
}

.home #main .inner {
width: 100%;
margin: 0 auto;
}

@media only screen  and (min-width: 1151px){
.home #main .inner {
max-width: 1100px;
}
}

@media only screen  and (max-width: 1150px){
.home #main .inner {
padding: 0 3%;
}
}

.home #main .block-ttl {
color: #39B4BE;
text-align: center;
line-height: 1.5;
	margin-top: 2rem;
}

@media only screen  and (min-width: 1151px){
.home #main .block-ttl {
margin-bottom: 2rem;
}
}

@media only screen  and (min-width: 701px)  and (max-width: 1150px){
.home #main .block-ttl {
margin-bottom: 2rem;
}
}

@media only screen  and (min-width: 481px)  and (max-width: 700px){
.home #main .block-ttl {
margin-bottom: 2.5rem;
}
}

@media only screen and (max-width: 480px){
.home #main .block-ttl {
margin-bottom: 2rem;
}
}

.home #main .block-ttl span {
display: block;
}

.home #main .block-ttl span.en {
font-weight: 700;
letter-spacing: 0.1em;
}

@media only screen  and (min-width: 701px){
.home #main .block-ttl span.en {
font-size: 1.8rem;
margin-bottom: .2rem;
}
}

@media only screen  and (min-width: 551px)  and (max-width: 700px){
.home #main .block-ttl span.en {
font-size: 1.8rem;
margin-bottom: .2rem;
}
}

@media only screen  and (min-width: 481px)  and (max-width: 550px){
.home #main .block-ttl span.en {
font-size: 2rem;
margin-bottom: .2rem;
}
}

@media only screen and (max-width: 480px){
.home #main .block-ttl span.en {
font-size: 1.5rem;
margin-bottom: .2rem;
}
}

.home #main .block-ttl span.jp {
font-family: 'M PLUS Rounded 1c', "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, Verdana, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

@media only screen  and (min-width: 701px){
.home #main .block-ttl span.jp {
font-size: .9rem;
}
}

@media only screen  and (min-width: 551px)  and (max-width: 700px){
.home #main .block-ttl span.jp {
font-size: 1.0rem;
}
}

@media only screen  and (min-width: 481px)  and (max-width: 550px){
.home #main .block-ttl span.jp {
font-size: 1.2rem;
}
}

@media only screen and (max-width: 480px){
.home #main .block-ttl span.jp {
font-size: .8rem;
}
}

.home #main .separator {}

@media only screen and (min-width: 481px){
.home #main .separator {
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
}

@media only screen and (max-width: 480px){
.home #main .separator {
}
}

.home #main .separator .item .ribbonArea {
position: absolute;
left: -4px; top: -5px;
z-index: 10;
}

.home #main .separator .item .ribbon {
position:relative;
text-align: center;
width: auto;
max-width: 200px;
padding: 0 0 0 10px;
background-color:#E85377;
color: #FFF;
height: 20px;
line-height: 18px;
}

@media only screen and (min-width: 701px){
.home #main .separator .item .ribbon {
font-size: .7rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .separator .item .ribbon {
font-size: 1rem;
}
}

@media only screen and (max-width: 480px){
.home #main .separator .item .ribbon {
font-size: .9rem;
}
}

.home #main .separator .item .ribbon:before{  
content:' ';  
position:absolute;  
left:0px;  
bottom:-4px;  
border-top:2px solid #666;  
border-right:2px solid #666;  
border-bottom:2px solid transparent;  
border-left:2px solid transparent; 
z-index: -1;
}  

.home #main .separator .item .ribbon:after{  
content:' ';  
position:absolute;  
right:-20px;  
top:0;  
border-bottom:10px solid transparent;  
border-left:10px solid #E85377;  
border-top:10px solid #E85377;  
border-right:10px solid transparent;  
z-index: 1;
}  

.home #main .btn {
margin: 2rem auto 0;
}  

@media only screen  and (min-width: 701px){
.home #main .btn {
max-width: 11.5rem;
}  
}

@media only screen  and (min-width: 551px)  and (max-width: 700px){
.home #main .btn {
max-width: 14.5rem;
}  
}

@media only screen  and (min-width: 481px)  and (max-width: 550px){
.home #main .btn {
max-width: 16.5rem;
}  
}

@media only screen  and (min-width: 401px)  and (max-width: 480px){
.home #main .btn {
max-width: 11.5rem;
}  
}

@media only screen and (max-width: 400px){
.home #main .btn {
max-width: 14rem;
}  
}

.home #main .btn a {
position: relative;
display: block;
width: 100%;
padding:.5rem 1rem .5rem .7rem;
background-color: #39B4BE;
color: #FFF;
border-radius: 50px;
text-align: center;
}  

@media only screen  and (min-width: 701px){
.home #main .btn a {
padding:.5rem 1rem .5rem .7rem;
}  
}

@media only screen  and (min-width: 481px)  and (max-width: 700px){
.home #main .btn a {
padding:.5rem 1rem .5rem .7rem;
font-size: 1.4rem;
}  
}

@media only screen and (max-width: 480px){
.home #main .btn a {
padding:.5rem 1rem .5rem .7rem;
}  
}

.home #main .btn a::before{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 25px;
margin: auto;
width: 15px;
height: 2px;
background: #FFF;
transition: .3s;
}

.home #main .btn a::after{
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
right: 25px;
margin: auto;
width: 8px;
height: 8px;
border-left: 2px solid #FFF;
border-bottom: 2px solid #FFF;
transform: rotate(-135deg);
transition: .3s;
}

.home #main .btn a:hover::before{
right: 5px;
width: 25px;
}

.home #main .btn a:hover::after{
right: 5px;
}

/*************************************************************************************
**************************************************************************************

block01

**************************************************************************************
**************************************************************************************/

.home #main .block01 {}

.home #main .block .separator {}

@media only screen and (min-width: 701px){
.home #main .block .separator {
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; 
}
}

@media only screen and (max-width: 700px){
.home #main .block .separator {
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; 
-webkit-box-pack: justify;	-webkit-justify-content: space-between;	-ms-flex-pack: justify;	justify-content: space-between;
}
}

.home #main .block .separator .item {
background-color: #FFF;
box-shadow: 0 1px 7px #c1c1c1;
position: relative;
border-radius: 7px;
}

@media only screen and (min-width: 701px){
.home #main .block .separator .item {
width: calc((100% - 3rem) / 4);
margin-right: .99rem;
padding: .7rem .7rem;
margin-bottom: 20px;
}

.home #main .block .separator .item:nth-of-type(4n) {
margin-right: 0;
}
}

@media only screen and (max-width: 700px){
.home #main .block .separator .item {
width: calc((100% - 2rem) / 2);
padding: 1rem 1rem;
margin-bottom: 2rem;
}

.home #main .block .separator .item:nth-of-type(odd) {
/*margin-right: .99rem;*/
}

.home #main .block .separator .item:nth-of-type(even) {
/*margin-left: .99rem;*/
}
}

@media only screen and (max-width: 480px){
.home #main .block .separator .item {
width: calc((100% - 2rem) / 2);
padding: 1rem 1rem;
margin-bottom: 2rem;
}

.home #main .block .separator .item:nth-of-type(odd) {
/*margin-right: .99rem;*/
}

.home #main .block .separator .item:nth-of-type(even) {
/*margin-left: .99rem;*/
}
}

.home #main .block .separator .item .item-ttl {
font-size: .9rem;
margin: 0 0 1.7rem;
letter-spacing: .1em;
}

@media only screen and (min-width: 701px) {
.home #main .block .separator .item .item-ttl {
font-size: .9rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .block .separator .item .item-ttl {
font-size: 1.2rem;
}
}

@media only screen and (max-width: 480px){
.home #main .block .separator .item .item-ttl {
font-size: .9rem;
}
}

.home #main .block .separator .item .photoArea {
padding-top: 60%;
overflow: hidden;
position: relative;
}

.home #main .block .separator .item .photoArea img {
position: absolute; top: 0; left: 0;
width: 100%; height: auto;
}

.home #main .block .separator .item .date {
text-align: right;
position: absolute;
right: .7rem;
bottom: .7rem;
}

@media only screen and (min-width: 701px) {
.home #main .block .separator .item .date {
font-size: .7rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .block .separator .item .date {
font-size: 1rem;
}
}

@media only screen and (max-width: 480px){
.home #main .block .separator .item .date {
font-size: .7rem;
}
}


/*************************************************************************************
**************************************************************************************

block01

**************************************************************************************
**************************************************************************************/

.home #main .block01 {}

.home #main .block01 .separator .item .tag_area {
margin: .9rem 0 .3rem;
border: #333 solid 1px;
padding: .2rem .2rem;
line-height: 1;
display: inline-block;
}

@media only screen and (min-width: 701px) {
.home #main .block01 .separator .item .tag_area {
font-size: .7rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .block01 .separator .item .tag_area {
font-size: 1rem;
}
}

@media only screen and (max-width: 480px){
.home #main .block01 .separator .item .tag_area {
font-size: .7rem;
}
}

.home #main .block01 .separator .item .tag_area.cat_event {
border-color:#E95405;
color: #E95405;
}

.home #main .block01 .separator .item .tag_area.cat_news {
border-color:#2D9A63;
color: #2D9A63;
}

.home #main .block01 .separator .item .tag_area.cat_YYY {
border-color:#E95405;
color: #E95405;
}



/*************************************************************************************
**************************************************************************************

block02

**************************************************************************************
**************************************************************************************/


.home #main .block02 {}

.home #main .block02 .separator .item .tag_area {
margin: .9rem 0 .3rem;
border: #333 solid 1px;
padding: .2rem .5rem;
line-height: 1;
display: inline-block;
border-radius: 50px;
border-color:#2D9A63;
color: #2D9A63;
}

@media only screen and (min-width: 701px) {
.home #main .block02 .separator .item .tag_area {
font-size: .7rem;
}
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .block02 .separator .item .tag_area {
font-size: 1rem;
}
}

@media only screen and (max-width: 480px){
.home #main .block02 .separator .item .tag_area {
font-size: .7rem;
}
}

/*************************************************************************************
**************************************************************************************

block03

**************************************************************************************
**************************************************************************************/


.home #main .block03 {}

.home #main .block03 .over {}

@media only screen and (min-width: 701px){
.home #main .block03 .over {
margin-bottom: 3rem;
}
}

@media only screen and (max-width: 700px){
.home #main .block03 .over {
}
}

.home #main .block03 .over ul {}

@media only screen and (min-width: 701px){
.home #main .block03 .over ul {
}
}

@media only screen and (min-width: 351px) and (max-width: 700px){
.home #main .block03 .over ul {
-webkit-box-pack: justify;	-webkit-justify-content: space-between;	-ms-flex-pack: justify;	justify-content: space-between;
}
}

@media only screen and (min-width: 351px){
.home #main .block03 .over ul {
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
}
}

@media only screen and (max-width: 350px){
.home #main .block03 .over ul {
}
}

.home #main .block03 .over ul li {}

@media only screen and (min-width: 701px){
.home #main .block03 .over ul li {
width: calc((100% - 3rem) / 4);
margin:0 .99rem 1rem 0;
}

.home #main .block03 .over ul li:nth-of-type(4n) {
margin:0 0 1rem 0;
}
}

@media only screen and (min-width: 351px) and (max-width: 700px){
.home #main .block03 .over ul li {
width: calc((100% - 1rem) / 2);
margin-bottom: 1rem;
}
}

@media only screen and (max-width: 350px){
.home #main .block03 .over ul li {
margin-bottom: 1rem;
}
}

.home #main .block03 .over ul li img {
width: 100%;
}

.home #main .block03 .under {
margin-top: 2rem;
}

.home #main .block03 .under ul {
display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex;
-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;
-webkit-box-pack: center;	-webkit-justify-content: center;	-ms-flex-pack: center;	justify-content: center;
}

.home #main .block03 .under ul li {
margin: 0 .5rem;
}

/*
.fa-facebook{
color:#296CF0;
}

.fa-line{
color:#33B001;
}

.fa-twitter-square{
color: #3497F0;
}

.fa-instagram {
color:#fff;
background:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%) no-repeat;
border-radius:20%;
width: 1em;
height: 1em;
overflow: hidden;
}

.fa-instagram-square {
color:#333;
background:radial-gradient(at 20% 120%,orange, #f15a4d 25%, #f13f79 55%, #9933ff 100%) no-repeat;
border-radius:20%;
font-weight: 900;
}
*/

.home #main .block03 .under ul li a {
position: relative;
display: block;
}

.home #main .block03 .under ul li a::before {
width: 3rem;
height: 3rem;
content: "";
display: block;
background-size: 3rem auto;
}

@media only screen and (min-width: 481px) and (max-width: 700px){
.home #main .block03 .under ul li a::before {
width: 4rem;
height: 4rem;
background-size: 4rem auto;
}
}

.home #main .block03 .under ul li.icon_fb a::before {
background-image: url(../images/facebook.png);
}

.home #main .block03 .under ul li.icon_twitter a::before {
background-image: url(../images/x.png);
}

.home #main .block03 .under ul li.icon_instagram a::before {
background-image: url(../images/instagram.png);
}

.home #main .block03 .under ul li.icon_line a::before {
background-image: url(../images/line.png);
}

.home #main .block03 .under ul li a:hover::before {
opacity: .8;
}



/*
@media only screen  and (min-width: 701px){
body {
overflow: visible !important;
}
}

@media only screen  and (min-width: 701px){
#panel2 {
padding-top: 10rem;
padding-bottom: 5rem;
height: 100% !important;
min-height: 100vh;
}
}

@media only screen  and (min-width: 701px){
#panel3 {
padding-top: 12rem;
padding-bottom: 5rem;
height: 100% !important;
min-height: 100vh;
	
}
}
*/