@charset "UTF-8";
/*base.css */
.orepa-name {
max-width:500px;
margin-top:-1px;
margin-bottom:-5px;
}
/* 文字設定クリア */
.clear_text {
color: initial;
font-size: initial;
text-shadow: initial;
margin: initial;
display: inline-block;
}
/* ★☆---------------- pc sumaho で表示、非表示 -------------------
PCとスマホで表示するもの使い分け
--------------------------------------
--------------★☆*/
/*××× 380px で変化 ×××*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc {
display: block !important;
margin: 0 auto;
max-width: 1600px;}
.sumaho { display: none !important; }
/* スマートフォンで見たときは"sumaho"のclassがついた画像が表示される */
@media only screen and (max-width: 380px) {
.pc { display: none !important; }
.sumaho { display: block !important; }
.orepa-name{
max-width:240px;
margin-top:-1px;
margin-bottom:-5px;
}
}
/*××× 600px で変化 ××××*/
/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc600px { display: block !important; }
.sumaho600px { display: none !important; }
/* スマートフォンで見たときは"sumaho"のclassがついた画像が表示される */
@media only screen and (max-width: 600px) {
.pc600px { display: none !important; }
.sumaho600px { display: block !important; }
}
/* ★☆---------------- 改行設定まとめ ------------------- ２０２０年５月１０日更新
PCとスマホで改行変化(下記すべてで一つの設定)
.pc_kaigyo_up PCの時 改行
.pc_kaigyo_non PCの時 消える改行
.sumaho_kaigyo_up スマホの時 改行
.sumaho_kaigyo_non スマホの時 消える改行
-------------------------------------------------------------------
スマホの時だけ 改行させる(PC変化なし)
.sumaho_dake_kaigyo
----------------------------------------------------------
PCの時だけ 改行させる(スマホ変化なし)
.pc_dake_kaigyo
--------------------------------------
--------------★☆*/
/* ★☆---------------- よく使うやつ -------------------
heikin-font-size スマホ16pxに
mozi-narabi-center-left スマホ左並び
--------------★☆*/
/* スマホの時 改行 */
.sumaho_kaigyo_up{
display: none;
}
/* PCの時 改行 */
.pc_kaigyo_up{
display: inline;
}
@media screen and (max-width: 1100px) {
/* スマホの時 消える改行 */
.sumaho_kaigyo_non{
display: none;
}
/* PCの時 改行 */
.pc_kaigyo_up{
display: none;
}
/* スマホの時 改行 */
.sumaho_kaigyo_up{
display: none;
}
}
@media screen and (max-width: 800px) {
/* スマホの時 改行 */
.sumaho_kaigyo_up{
display: inline;
}
}
/* スマホの時だけ改行 */
.sumaho_dake_kaigyo{
display: none;
}
@media screen and (max-width: 1000px) {
/* スマホの時 改行 */
.sumaho_dake_kaigyo{
display: inline;
}
}
/* スマホの時だけ改行 400px */
.sumaho_dake_kaigyo400{
display: none;
}
@media screen and (max-width: 400px) {
/* スマホの時だけ改行 400px */
.sumaho_dake_kaigyo400{
display: inline;
}
}
/* スマホの時だけ改行 280px */
.sumaho_dake_kaigyo280{
display: none;
}
@media screen and (max-width: 280px) {
/* スマホの時だけ改行 280px */
.sumaho_dake_kaigyo280{
display: inline;
}
}
/* スマホの時だけ改行 300px */
.sumaho_dake_kaigyo300{
display: none;
}
@media screen and (max-width: 300px) {
/* スマホの時だけ改行 300px */
.sumaho_dake_kaigyo300{
display: inline;
}
}
/* スマホの時だけ改行 500px */
.sumaho_dake_kaigyo500{
display: none;
}
@media screen and (max-width: 500px) {
/* スマホの時だけ改行 500px */
.sumaho_dake_kaigyo500{
display: inline;
}
}
/* スマホの時だけ改行 800px */
.sumaho_dake_kaigyo800{
display: none;
}
@media screen and (max-width: 800px) {
/* スマホの時だけ改行 800px */
.sumaho_dake_kaigyo800{
display: inline;
}
}
/* PCの時だけ改行 */
.pc_dake_kaigyo{
display: inline;
}
@media screen and (max-width: 1000px) {
/* PCの時だけ改行 */
.pc_dake_kaigyo{
display: none;
}
}
/* PCの時だけ改行 600px */
.pc_dake_kaigyo600{
display: inline;
}
@media screen and (max-width: 600px) {
/* PCの時だけ改行 600px */
.pc_dake_kaigyo600{
display: none;
}
}
/* PCの時だけ改行 800px */
.pc_dake_kaigyo800{
display: inline;
}
@media screen and (max-width: 800px) {
/* PCの時だけ改行 600px */
.pc_dake_kaigyo800{
display: none;
}
}
/* PCの時だけ改行 400px */
.pc_dake_kaigyo400{
display: inline;
}
@media screen and (max-width: 400px) {
/* PCの時だけ改行 400px */
.pc_dake_kaigyo400{
display: none;
}
}
/* PCの時だけ改行 300px */
.pc_dake_kaigyo300{
display: inline;
}
@media screen and (max-width: 300px) {
/* PCの時だけ改行 300px */
.pc_dake_kaigyo300{
display: none;
}
}
/* ★☆---------------- 改行設定まとめ --------------★☆*/
/* ★☆---------------- 文字縮小 まとめ
最小画面用 文字サイズ(PC変化なし)-----------------------------
.mini-gamen-font-size
--------------------------------------
--------------★☆*/
/*★☆★☆★☆ 【通常文字】→PCサイズ 20ｐｘ 570pxから */
.heikin-font-size{
font-size:20px;
}
/* 【通常文字→平均スマホサイズ １６ｐｘ */
@media screen and (max-width: 570px) {
.heikin-font-size{
font-size:16px;
}
}
/*★☆★☆★☆ 【ミニミニ通常文字】→PCサイズ 16ｐｘ 570pxから */
.mini-heikin-font-size{
font-size:20px;
}
/* 【通常文字→平均スマホサイズ １4ｐｘ */
@media screen and (max-width: 570px) {
.mini-heikin-font-size{
font-size:14px;
}
}
/*★☆★☆★☆ 【通常文字】→PCサイズ 18ｐｘ */
.heikin-font-size18px{
font-size:18px;
}
/* 【通常文字→平均スマホサイズ １６ｐｘ */
@media screen and (max-width: 500px) {
.heikin-font-size18px{
font-size:16px;
}
}
/*★☆★☆★☆ 【通常文字】→PCサイズ 20ｐｘ 370pxから */
.heikin-font-size20px→18px{
font-size:20px;
}
/* 【通常文字→平均スマホサイズ １8ｐｘ */
@media screen and (max-width: 370px) {
.heikin-font-size20px→18px{
font-size:18px;
}
}
/*★☆★☆★☆ 【通常文字】→PCサイズ 22ｐｘ 370pxから */
.heikin-font-size22px→18px{
font-size:22px;
}
/* 【通常文字→平均スマホサイズ １8ｐｘ */
@media screen and (max-width: 370px) {
.heikin-font-size22px→18px{
font-size:18px;
}
}
/*★☆★☆★☆ 【通常文字】→PCサイズ 24ｐｘ */
.heikin-font-size24px→18px{
font-size:24px;
}
/* 【通常文字→平均スマホサイズ 18ｐｘ */
@media screen and (max-width: 370px) {
.heikin-font-size24px→18px{
font-size:18px;
}
}
/*★☆★☆★☆★☆ 3段階 【通常文字】→PCサイズ 30ｐｘ */
.heikin-font-size30px→24px→18px{
font-size:30px;
}
/* 【通常文字→中間 サイズ 24ｐｘ */
@media screen and (max-width: 430px) {
.heikin-font-size30px→24px→18px{
font-size:24px;
}
}
/* 【通常文字→スマホサイズ 18ｐｘ */
@media screen and (max-width: 370px) {
.heikin-font-size30px→24px→18px{
font-size:18px;
}
}
/*★☆★☆★☆★☆ 最小画面用 文字縮小 8vw */
.mini-gamen-font-size{
font-size:20px;
}
@media screen and (max-width: 380px) {
.mini-gamen-font-size{
font-size:8vw;
}
}
/*★☆★☆★☆★☆ 最小画面用 文字縮小 8vw 文字だけでかく */
.mini-gamen-font-size30px{
font-size:30px;
}
@media screen and (max-width: 380px) {
.mini-gamen-font-size30px{
font-size:8vw;
}
}
/* 最小画面用 文字縮小 6vw*/
.mini-gamen-font-size6vw{
font-size:18px;
}
@media screen and (max-width: 380px) {
.mini-gamen-font-size6vw{
font-size:6vw;
}
}
/* 最小画面用 文字縮小 5vw*/
.mini-gamen-font-size5vw{
font-size:16px;
}
@media screen and (max-width: 380px) {
.mini-gamen-font-size5vw{
font-size:5vw;
}
}
/* 最小画面用 文字縮小 5vwかつ500px で適応*/
.mini-gamen-font-size5vw-500px{
font-size:16px;
}
@media screen and (max-width: 500px) {
.mini-gamen-font-size5vw-500px{
font-size:5vw;
}
}
/* 最小画面用 文字縮小 3段階 比較的大きい文字変化 25px */
.mini-gamen-font-size-big{
font-size:25px;
}
@media screen and (max-width: 650px) {
.mini-gamen-font-size-big{
font-size:4vw;
}
}
@media screen and (max-width: 380px) {
.mini-gamen-font-size-big{
font-size:8vw;
}
}
/* 最小画面用２ 文字縮小 3段階 タイトル文字想定 25px 3段階部分調整 */
.mini-gamen-font-size-big2{
font-size:25px;
}
@media screen and (max-width: 650px) {
.mini-gamen-font-size-big2{
font-size:4vw;
padding:0 10px;
}
}
@media screen and (max-width: 380px) {
.mini-gamen-font-size-big2{
font-size:5vw;
padding:0 10px;
}
}
/* 文字でか 3段階 見出し想定 40px */
.mini-gamen-font-size-big3{
font-size:40px;
}
@media screen and (max-width: 650px) {
.mini-gamen-font-size-big3{
font-size:5vw;
padding:0 10px;
}
}
@media screen and (max-width: 480px) {
.mini-gamen-font-size-big3{
font-size:8vw;
padding:0 10px;
}
}
/* 最小画面用4 文字縮小 3段階 タイトル文字想定 20px 3段階部分調整 */
.mini-gamen-font-size-big4{
font-size:20px;
}
@media screen and (max-width: 650px) {
.mini-gamen-font-size-big4{
font-size:4vw;
padding:0 10px;
}
}
@media screen and (max-width: 380px) {
.mini-gamen-font-size-big4{
font-size:5vw;
padding:0 10px;
}
}
/* ★☆---------------- 文字の並び 真ん中 左
文字の並び位置 PC真ん中 スマホ左並び-----------------------------
mozi-narabi-center-left
--------------------------------------
文字の並び位置 真ん中 に戻す----------------------------
mozi-narabi-center-left
--------------------------------------
--------------★☆*/
.mozi-narabi-center-left{
text-align:center;
}
@media screen and (max-width: 570px) {
.mozi-narabi-center-left{
text-align:left;
padding:10px;
}
}
.mozi-narabi-center-left580{
text-align:center;
}
@media screen and (max-width: 580px) {
.mozi-narabi-center-left580{
text-align:left;
}
}
.mozi-narabi-center-left880{
text-align:center;
}
@media screen and (max-width: 880px) {
.mozi-narabi-center-left880{
text-align:left;
}
}
.mozi-narabi-center-left280{
text-align:center;
}
@media screen and (max-width: 280px) {
.mozi-narabi-center-left280{
text-align:left;
}
}
/* 文字並び 真ん中に戻す */
@media screen and (max-width: 550px) {
.mozi-narabi-center{
text-align:center;
}
}
@media screen and (max-width: 300px) {
.mozi-narabi-center300{
text-align:center;
}
}
/* ★☆---------------- スマホの時だけ特定の場所が消える ↓ --------------★☆*/
/* スマホの時だけ特定の場所が消える */
@media screen and (max-width: 800px) {
.sumaho_kesu{
display: none;
}
}
/* スマホの時だけ特定の場所が消える380 */
@media screen and (max-width: 380px) {
.sumaho_kesu380{
display: none;
}
}
/* ★☆---------------- スマホの時だけ特定の場所が出現 ↓ --------------★☆*/
.sumaho_deru{
display: none;
}
/* スマホの時だけ特定の場所が消える */
@media screen and (max-width: 800px) {
.sumaho_deru{
display: inline;
}
}
.sumaho_deru380{
display: none;
}
/* スマホの時だけ特定の場所が消える */
@media screen and (max-width: 380px) {
.sumaho_deru380{
display: inline;
}
}
/* ★☆---------------- スマホの時だけ特定の場所が消える ↑--------------★☆*/
.img-pc-sumaho{
width:300px;
}
/* スマホの時だけ特定の場所が消える */
@media screen and (max-width: 380px) {
.img-pc-sumaho{
width:200px;
}
}
/* ★☆---------------- PCかスマホのみ空白作る --------------★☆*/
/* ★☆--------- PC空白作る -------★☆*/
/* PC 上空白 ５０ｐｘ */
.pc_ue_kuuhaku{
margin-top:50px;
}
/* PC 下空白 ５０ｐｘ */
.pc_shita_kuuhaku{
margin-bottom:50px;
}
/* PC 右空白 ５０ｐｘ */
.pc_migi_kuuhaku{
margin-right:50px;
}
/* PC 左空白 ５０ｐｘ */
.pc_hidari_kuuhaku{
margin-left:50px;
}
@media screen and (max-width: 800px) {
/* PC 上空白 ５０ｐｘ スマホになると消える */
.pc_ue_kuuhaku{
margin-top:0px;
}
/* PC 下空白 ５０ｐｘ スマホになると消える */
.pc_shita_kuuhaku{
margin-bottom:0px;
}
/* PC 右空白 ５０ｐｘ スマホになると消える */
.pc_migi_kuuhaku{
margin-right:0px;
}
/* PC 左空白 ５０ｐｘ スマホになると消える */
.pc_hidari_kuuhaku{
margin-left:0px;
}
/* ★☆--------- スマホ空白作る -------★☆*/
/* スマホ 上空白 ５０ｐｘ */
.sumaho_ue_kuuhaku{
margin-top:50px;
}
/* スマホ 下空白 ５０ｐｘ */
.sumaho_shita_kuuhaku{
margin-bottom:50px;
}
/* スマホ 右空白 ５０ｐｘ */
.sumaho_migi_kuuhaku{
margin-right:50px;
}
/* スマホ 左空白 ５０ｐｘ */
.sumaho_hidari_kuuhaku{
margin-left:50px;
}
}
/* ★☆---------------- PCかスマホのみ空白作る --------------★☆*/
/* ★☆---------------- スマホのみ マイナスの空白を作って場所を狭める
上に場所を狭める スマホのみ-----------------------------
sumaho_ue_semaku
--------------------------------------
--------------★☆*/
/* ★☆--------- スマホのみ上に狭くする -------★☆*/
/* スマホ 上狭くする -1０ｐｘ */
@media screen and (max-width: 480px) {
.sumaho_ue_semaku{
margin-top:-10px;
}
}
/* ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆*/
.kouzyou-aco-tab input {/*input要素自体は非表示にしておく*/
position: absolute;
opacity: 0;
z-index: -1;
}
/*アコーディオンのスタイリング*/
.kouzyou-aco-tabs {
border-radius: 8px;
overflow: hidden;
border:1px solid #ddd;
border-top:none;
}
.kouzyou-aco-tab {
width: 100%;
color: white;
overflow: hidden;
}
.kouzyou-aco-tab-label {
display: flex;
justify-content: space-between;
padding: 1em;
background: #2c3e50;
font-weight: bold;
cursor: pointer;
}
.kouzyou-aco-tab-label:hover {
background: #1a252f;
}
.kouzyou-aco-tab-label::after {
content: "\276F";
width: 1em;
height: 1em;
text-align: center;
transition: all .35s;
}
.kouzyou-aco-tab-content {
max-height: 0;
padding: 0 1em;
color: #333;
background: white;
transition: all .35s;
}
.kouzyou-aco-tab-close {/*閉じるボタン*/
display: flex;
justify-content: flex-end;
padding: 1em;
font-size: 0.75em;
background: #2c3e50;
cursor: pointer;
}
.kouzyou-aco-tab-close:hover {
background: #1a252f;
}
/*チェックが入ってる時のスタイル*/
.kouzyou-aco-tab input:checked + .kouzyou-aco-tab-label {
background: #1a252f;
}
.kouzyou-aco-tab input:checked + .kouzyou-aco-tab-label::after {
transform: rotate(90deg);
}
.kouzyou-aco-tab input:checked ~ .kouzyou-aco-tab-content {/*チェックが入ったら開く*/
max-height: 100vh;
padding: 1em;
}
/*Base setting_____________________________________*/
body {
color:#333;
font:14px/1.6 Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
overflow-x:hidden;
margin: 0px;padding: 0px;
background-image:url(../img/background.jpg);
-webkit-text-size-adjust: none;
}
/*header*/
html{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
/*
モーダルウィンドウ リンク解除後 一番上にジャンプしてしまうのを防ぐため 非表示
body{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
*/
header {
width:100%;
z-index:9999;
position:fixed;
background: rgba(255,255,255);}
/* @group reset */
*{margin: 0;padding: 0}
a{ text-decoration:none}
ul,ol{list-style:none}
img {vertical-align:middle}
div {margin:0; padding:0}
/* @end-start */
html,
button,
input,
select,
textarea {
color: #222;
}
body {
font-size: 1em;
line-height: 1.4;
}
p.top-img img {
width: 100%;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #f2c2c9;
color: #a4003a;
text-shadow: none;
}
::selection {
background: #16a085;
color: #a4003a;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/**========================================**/
/**========果物狩りタブメニュー開始========**/
/**========================================**/
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon/icomoon.eot?p6b4o');
src: url('../fonts/icomoon/icomoon.eot?p6b4o#iefix') format('embedded-opentype'),
url('../fonts/icomoon/icomoon.ttf?p6b4o') format('truetype'),
url('../fonts/icomoon/icomoon.woff?p6b4o') format('woff'),
url('../fonts/icomoon/icomoon.svg?p6b4o#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
/* Icons created with icomoon.io/app */
.tabs{
position: relative;
width: 100%;
overflow: hidden;
margin: 1em 0 2em;
}
/* Nav *
.tabs nav {
text-align: center;
}
.tabs nav ul {
padding: 0;
margin: 0;
list-style: none;
display: inline-block;
}
.tabs nav li:nth-child(1) a:hover {
color: #e89586;
}
.tabs nav li:nth-child(2) a:hover {
color: #71b557;
}
.tabs nav li:nth-child(3) a:hover {
color: #b87cad;
}
.tabs nav li:nth-child(4) a:hover {
color: #F79715;
}
.tabs nav ul li {
border: 1px solid #becbd2;
border-bottom: none;
margin: 0 0.25em;
display: block;
float: left;
position: relative;
background-color:#FFF;
}
.tabs nav li:nth-child(1).tab-current {
border: 2px solid #e89586;
box-shadow: inset 0 2px #e89586;
border-bottom: none;
z-index: 100;
}
.tabs nav li:nth-child(2).tab-current {
border: 2px solid #71b557;
box-shadow: inset 0 2px #71b557;
border-bottom: none;
z-index: 100;
}
.tabs nav li:nth-child(3).tab-current {
border: 2px solid #b87cad;
box-shadow: inset 0 2px #b87cad;
border-bottom: none;
z-index: 100;
}
.tabs nav li:nth-child(4).tab-current {
border: 2px solid #F79715;
box-shadow: inset 0 2px #F79715;
border-bottom: none;
z-index: 100;
}
.tabs nav li:nth-child(1).tab-current:before,
.tabs nav li:nth-child(1).tab-current:after {
content: '';
position: absolute;
height: 7px;
right: 100%;
bottom: 0;
width: 1920px;
background: #e89586;
}
.tabs nav li:nth-child(2).tab-current:before,
.tabs nav li:nth-child(2).tab-current:after {
content: '';
position: absolute;
height: 7px;
right: 100%;
bottom: 0;
width: 1920px;
background: #71b557;
}
.tabs nav li:nth-child(3).tab-current:before,
.tabs nav li:nth-child(3).tab-current:after {
content: '';
position: absolute;
height: 7px;
right: 100%;
bottom: 0;
width: 1920px;
background: #b87cad;
}
.tabs nav li:nth-child(4).tab-current:before,
.tabs nav li:nth-child(4).tab-current:after {
content: '';
position: absolute;
height: 7px;
right: 100%;
bottom: 0;
width: 1920px;
background: #F79715;
}
.tabs nav li.tab-current:after {
right: auto;
left: 100%;
width: 4000px;
}
.tabs nav a {
color: #becbd2;
display: block;
font-size: 1.45em;
line-height: 2.5;
padding: 0 1.25em;
white-space: nowrap;
font-weight:bold;
}
.tabs nav li:nth-child(1).tab-current a {
color: #e89586;
}
.tabs nav li:nth-child(2).tab-current a {
color: #71b557;
}
.tabs nav li:nth-child(3).tab-current a {
color: #b87cad;
}
.tabs nav li:nth-child(4).tab-current a {
color: #F79715;
}
/* Icons *
.tabs nav a:before {
display: inline-block;
vertical-align: middle;
text-transform: none;
font-weight: normal;
font-variant: normal;
font-family: 'icomoon';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased;
margin: -0.25em 0.4em 0 0;
}
.icon-fruit:before {
content: "\e90b";
color: #fff;
}
.icon-home:before {
content: "\e90c";
color: #fff;
}
.icon-menu:before {
content: "\e920";
color: #fff;
}
.icon-pass:before {
content: "\e926";
color: #fff;
}
.icon-shop:before {
content: "\e927";
color: #fff;
}
.icon-budou:before {
content: "\e900";
color: #c081b5;
}
.icon-peach:before {
content: "\e90f";
color: #c081b5;
}
.icon-ichigo:before {
content: "\e904";
color: #f29989;
}
.icon-ichigo2:before {
content: "\e904";
color: #FFF;
}
.icon-melon:before {
content: "\e905";
color: #74bd58;
}
.icon-mikan:before {
content: "\e907";
color: #fbc300;
}
.icon-nashi:before {
content: "\e908";
color: #e4d134;
}
/*
.icon-event:before {
content: "\e917";
color: #0AB8ED;
}
*/
/* Content */
.content section {
font-size: 1.25em;
padding: 1em 1em 1em;
display: none;
max-width: 1230px;
margin: 0 auto;
background-color:#FFF;
}
.content section:before,
.content section:after {
content: '';
display: table;
}
.content section:after {
clear: both;
}
/* Fallback example */
.no-js .content section {
display: block;
padding-bottom: 2em;
border-bottom: 1px solid #47a3da;
}
.content section.content-current {
display: block;
}
/**========================================**/
/**======果物狩りタブメニューここまで======**/
/**========================================**/
/* ==========================================================================
General styles
========================================================================== */
html {
height: 100%;
}
/*
モーダルウィンドウ リンク解除後 一番上にジャンプしてしまうのを防ぐため 非表示
body {
height: 100%;
}
*/
body {
font-family: "Lato";
font-weight: 300;
font-size: 16px;
color: #555;
background-color: #F8F1E7;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
.row {
margin-right: 0px;
margin-left: 0px;
}
.modal-header {
background: #3498db;
}
.modal-header h4 {
color: white;
}
.modal-footer {
background: #2b2b2b;
}
hr {
position: relative;
border: none;
}
hr:before {
content: " ";
position: absolute;
top: 0;
left: 25%;
width: 50%;
height: 2px;
background: #ccc;
}
.odd a img {
background: #f5f5f5;
}
/* Titles */
h1, h2, h3, h4, h5, h6 {
font-family: "Raleway";
font-weight: 300;
color: #333;
}
/* Paragraph & Typographic */
p {
line-height: 28px;
margin-bottom: 25px;
}
.centered {
text-align: center;
}
.paragraph-lead {
font-size: 20px;
color: #3498db;
}
strong {
font-weight: 700;
color: #000000;
}
em {
font-weight: 300;
}
pre {
background: #ebebeb;
border: none;
font-family: "Monaco";
font-size: 16px;
color: #666;
padding: 20px;
line-height: 28px;
}
small {
font-size: 12px;
}
blockquote,
blockquote p {
line-height: 28px;
color: #999;
font-weight: 300;
font-style: italic;
}
blockquote {
position: relative;
margin: 0 0 40px -30px;
padding-left: 30px;
border-left: 5px solid #3498db;
}
blockquote cite {
position: absolute;
bottom: -25px;
right: 0;
font-size: 12px;
font-style: italic;
color: #333;
font-weight: 300;
}
blockquote cite:before {
content: "-- "
}
/* Images */
.overflow-image {
margin-top: -65px;
}
/* Links */
a {
color: #3498db;
word-wrap: break-word;
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
a:hover,
a:focus {
color: #FFFFFF;
text-decoration: none;
outline: 0;
}
a:before,
a:after {
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
#headerwrap{
height:auto;
width: 100%;
text-align: center;
}
/* .viewer
クロスフェード fade.js
------------------------- */
.viewer {
margin: 0 auto;
width: 100%;
position: relative;
overflow: hidden;
}
.viewer ul {
width: 100%;
overflow: hidden;
position: relative;
}
.viewer ul li {
top: 0;
left: 0;
width: 100%;
position: absolute;
}
.viewer ul li img {
width: 100%;
}
/* .viewer 旧オレパバージョン
------------------------- */
/*
.viewer {
margin: 0 auto;
width: 100%;
position: relative;
overflow: hidden;
}
.viewer ul {
width: 100%;
overflow: hidden;
position: relative;
}
.viewer ul li {
top: -1px;
left: 20px;
width: 100%;
position: absolute;
}
.viewer ul li img {
width: 100%;
}
*/
/* sideNavi
------------------------- *
.viewer .btnPrev,
.viewer .btnNext {
margin-top: -25px;
top: 50%;
width: 50px;
height: 50px;
position: absolute;
z-index: 101;
}
.viewer .btnPrev {
left: 10px;
background: #ccc url(../img/btnPrev.jpg) no-repeat center center;
}
.viewer .btnNext {
right: 10px;
background: #ccc url(../img/btnNext.jpg) no-repeat center center;
}
/* =======================================
ClearFixElements
======================================= */
.viewer ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
.viewer ul {
display: inline-block;
overflow: hidden;
}
.slider_prev,
.slider_next {
top: 0;
overflow: hidden;
position: absolute;
z-index: 100;
cursor: pointer;
}
.slider_prev {background: #fff url(../img/prev.jpg) no-repeat right center;}
.slider_next {background: #fff url(../img/next.jpg) no-repeat left center;}
.pagination {
bottom: 10px;
left: 0;
width: 100%;
height: 15px;
text-align: center;
position: absolute;
z-index: 200;
visibility: visible;
}
.pagination a {
margin: 0 5px;
width: 15px;
height: 15px;
display: inline-block;
overflow: hidden;
background: #333;
}
.pagination a.active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}
a:hover img {
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter: "alpha( opacity=60 )";
background:none!important;
}
/* =======================================
movie
======================================= */
.movie-wrap {
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.movie-wrap2 {
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
margin-top:5px;
}
@media screen and (max-width: 1100px) {
.movie-wrap2 {
margin-top:-5px;
}
}
.movie-wrap2 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#contents {
clear: both;
margin: 3% 10%;
}
#main {
float: right;
width: 68%;
background: #fff;
}
#sub {
float: none;
width: 72%;
}
#main h2 {
padding: 0 15px;
font-weight: bold;
letter-spacing: 0.2em;
font-size: 20px;
line-height: 1.5;
color: #fff;
border-bottom: 1px solid #ccc;
}
#main h3 {
clear: both;
margin-bottom: 20px;
padding: 6px 20px;
border: 1px solid #ccc;
background: #fff;
}
#main h3::first-letter {
border-left: 3px solid #60930e;
padding-left: 10px;
}
#main p {
padding: 0px 20px 20px;
}
#main h2 + p,
#main h3 + p {
margin-top: -10px;
}
#sub {
float: left;
width: 24%;
background: #fff;
}
#sub h2 {
padding: 0 15px;
font-weight: bold;
letter-spacing: 0.2em;
font-size: 20px;
line-height: 1.5;
color: #fff;
border-bottom: 1px solid #ccc;
}
#sub nav + nav h2,
#sub nav + h2 {
border-top: none;
}
#sub h2 span {
display: block;
font-size: 13px;
letter-spacing: normal;
}
#sub h2.bg2 {
background: #fff url(../images/bg2.png) no-repeat right center;
}
#sub p {
padding: 15px;
line-height:150%;
}
#sub dl {
padding: 15px;
line-height:10%;
}
#sub dl {
line-height:20%;
}
#sub dt img {
padding-top:20px;
max-width:30%;
}
#sub .submemo {
font-size:16px;
line-height:150%;
}
#sub .border {
padding-left:0.5em;
margin:0.2em 0 0.3em 0;
border-bottom: solid 1px #666;
}
#sub p img {
display:block;
margin:0 auto;
width:90%;
}
#new dl {
margin-bottom: -30px;
height: 230px;
overflow: auto;
background-color:#fff;
/* padding: 10px 15px 10px 0;
margin-bottom: 15px; */
}
#new dt {
padding: 0.5em;
padding-left:1em;
font-weight: bold;
float: left;
/*
width: 8em;
*/
}
#new dd {
padding: 0.5em;
border-bottom: solid 1px #CCC;
}
#newinfo a:hover {
color:#999;
}
#ribbon_g{
position:relative;
padding:10px;
background:#a3ce69;
box-shadow:
10px 0 0 0 #a3ce69,
-10px 0 0 0 #a3ce69,
0 3px 3px 0 rgba(0,0,0,0.1);
}
#ribbon_g:before{
content:" ";
position:absolute;
top:100%;
left:-10px;
width:0;
height:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent;
border-right-color:#789b40;
}
#ribbon_g:after{
content:" ";
position:absolute;
top:0px;
left:100%;
width:0;
height:0;
border-width:15.5px 10px;
border-style:solid;
border-color:#a3ce69;
border-right-color:transparent;
}
#ribbon_b{
position:relative;
padding:10px;
background:#85c5ab;
box-shadow:
10px 0 0 0 #85c5ab,
-10px 0 0 0 #85c5ab,
0 3px 3px 0 rgba(0,0,0,0.1);
}
#ribbon_b:before{
content:" ";
position:absolute;
top:100%;
left:-10px;
width:0;
height:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent;
border-right-color:#459372;
}
#ribbon_b:after{
content:" ";
position:absolute;
top:0px;
left:100%;
width:0;
height:0;
border-width:15.5px 10px;
border-style:solid;
border-color:#85c5ab;
border-right-color:transparent;
}
#ribbon_y{
position:relative;
padding:10px;
background:#fbc300;
box-shadow:
10px 0 0 0 #fbc300,
-10px 0 0 0 #fbc300,
0 3px 3px 0 rgba(0,0,0,0.1);
}
#ribbon_y:before{
content:" ";
position:absolute;
top:100%;
left:-10px;
width:0;
height:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent;
border-right-color:#bc930f;
}
#ribbon_y:after{
content:" ";
position:absolute;
top:0px;
left:100%;
width:0;
height:0;
border-width:15.5px 10px;
border-style:solid;
border-color:#fbc300;
border-right-color:transparent;
}
#ribbon_p{
position:relative;
padding:10px;
background:#f29989;
box-shadow:
10px 0 0 0 #f29989,
-10px 0 0 0 #f29989,
0 3px 3px 0 rgba(0,0,0,0.1);
}
#ribbon_p:before{
content:" ";
position:absolute;
top:100%;
left:-10px;
width:0;
height:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent;
border-right-color:#cc5646;
}
#ribbon_p:after{
content:" ";
position:absolute;
top:0px;
left:100%;
width:0;
height:0;
border-width:15.5px 10px;
border-style:solid;
border-color:#f29989;
border-right-color:transparent;
}
#ribbon_pp{
position:relative;
padding:10px;
background:#c081b5;
box-shadow:
10px 0 0 0 #c081b5,
-10px 0 0 0 #c081b5,
0 3px 3px 0 rgba(0,0,0,0.1);
}
#ribbon_pp:before{
content:" ";
position:absolute;
top:100%;
left:-10px;
width:0;
height:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent;
border-right-color:#93448a;
}
#ribbon_pp:after{
content:" ";
position:absolute;
top:0px;
left:100%;
width:0;
height:0;
border-width:15.5px 10px;
border-style:solid;
border-color:#c081b5;
border-right-color:transparent;
}
#ribbon_ppp{
position:relative;
padding:10px;
background:#ff76a0;
box-shadow:
10px 0 0 0 #ff76a0,
-10px 0 0 0 #ff76a0,
0 3px 3px 0 rgba(0,0,0,0.1);
}
#ribbon_ppp:before{
content:" ";
position:absolute;
top:100%;
left:-10px;
width:0;
height:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent;
border-right-color:#e0698e;
}
#ribbon_ppp:after{
content:" ";
position:absolute;
top:0px;
left:100%;
width:0;
height:0;
border-width:15.5px 10px;
border-style:solid;
border-color:#ff76a0;
border-right-color:transparent;
}
#ribbon_r{
position:relative;
padding:10px;
background:#f26954;
box-shadow:
10px 0 0 0 #f26954,
-10px 0 0 0 #f26954,
0 3px 3px 0 rgba(0,0,0,0.1);
}
#ribbon_r:before{
content:" ";
position:absolute;
top:100%;
left:-10px;
width:0;
height:0;
border-width:0 10px 10px 0;
border-style:solid;
border-color:transparent;
border-right-color:#b24d3e;
}
#ribbon_r:after{
content:" ";
position:absolute;
top:0px;
left:100%;
width:0;
height:0;
border-width:15.5px 10px;
border-style:solid;
border-color:#f26954;
border-right-color:transparent;
}
#sub dt {
font-size:25px;
}
#sub dd {
font-size:30px;
line-height:1em;
}
.Instagram {
margin:0 auto;
position: relative;
/*
padding-top: 10px; */
}
/* =======================================
sp css スマホここから
======================================= */
/*画面幅900px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:900px){
#contents{/* 追加 */
width: 90%;
margin: 0 auto;
margin-top:20px;
margin-bottom:10px;
}
#main, #sub {
float: none;
width: 100%;
margin: 0 auto;
margin-top:0;
}
#main p, #sub p {/* 追加 */
padding:0px 20px 20px 20px;
}
#main{
margin-top:0;
}
.top-contents-container{
width:90%;
margin:0 auto;
}
.top-inner-weappre{
width:80%;
margin-right:9%;
display:inline-block;
vertical-align:top;
letter-spacing:0em;
}
.top-inner-wrapper td, th {
padding:0 5px;
line-height: 180%;
letter-spacing: 0em;
}
.top-inner-wrapper p {
font-weight:bold;
color:#F36366;
margin:0;
}
.top-inner-wrapper img{
width:100%;
display:inline-block;
margin:0 auto;
margin-bottom:5px;
}
.top-inner-wrapper table{
display:block;
margin:0 auto;
width:90%;
}
.Instagram {
max-width:100%;
margin:0 auto;
/*
padding-top: 10px; */
}
body.s-n #sub {display: none;}
}
.thumbnail img{
float: left;
width:25%;
padding:1%;
margin-left: auto;
margin-right: auto;
}
/** マウスオーバーで拡大 大きさ固定 **/
#photototo {
max-width: 380px;
margin: 0 auto;
text-align: center;
}
#photototo li {
display: inline-block;
width: 100%;
}
#photototo li a {
display: block;
width: 100%;
height: auto;
overflow: hidden;
}
#photototo img {
width: 90%;
height: auto;
transition: .3s ease-in-out;
}
#photototo a:hover img {
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}
/* S果物狩りS _____________________________________*/
.fruit-contents1 {
width:90%;
margin-left: auto;
margin-right: auto;
}
.movie-wrap {
margin-bottom:30px;
}
/* fruit カレンダー設定一部変更～スマホ～*/
.fruit-contents1-1-1 {
width:30%;/* 初期30%*/
display:inline-block;
vertical-align:top;
letter-spacing:0em;
margin-left:-25px;/* はみ出るとこ調整 初期-25px%*/
}
.fruit-contents1-2 {
width:90%;
padding-top:50px;
margin-bottom:40px;
margin-left: auto;
margin-right: auto;
}
.yoyaku table{
margin-bottom:30px;
}
/* S果物狩り詳細S _____________________________________*/
.fruit-contents-container{
width:90%;
margin:0 auto;
}
.fruit-inner-weappre{
width:80%;
margin-right:4%;
display:inline-block;
vertical-align:top;
letter-spacing:0em;
}
.fruit-inner-wrapper td, th {
padding: 5px 15px;
line-height: 180%;
letter-spacing: 0em;
}
.fruit-inner-wrapper p {
font-weight:bold;
color:#F36366;
margin:0;
}
.fruit-inner-wrapper img{
width:90%;
text-align:center;
margin-bottom:10px;
}
/* S果物狩り料金表S _____________________________________*/
#fruitprice {
margin-bottom:10px;
}
#fruitprice table {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
/* メロン料金表(スマホ用) */
#sp-fruitprice {
padding-top:1.5em;
}
#sp-fruitprice table{
margin-top:1em;
margin-left: auto;
margin-right: auto;
}
#sp-fruitprice table:last-child{
margin-bottom:5px;
}
#sp-fruitprice:last-child{
margin-bottom:150px;
}
#sp-fruitprice table td{
padding: 5px 5px;
}
#sp-fruitprice table td strong{
color:#FFFFFF;
line-height:150%;
}
#pc-fruitprice{
display:none;
}
/* S果物狩りカレンダーS _____________________________________*/
.cal-inner-wrapper{
margin-bottom:80px;
}
.cal-contents-container h1{
text-align:center;
letter-spacing:0em;
}
.cal-contents-container{
width:80%;
margin-top:70px;
margin-left: auto;
margin-right: auto;
}
.cal-contents-container table {
margin-bottom:30px;
margin-left: auto;
margin-right: auto;
}
.cal-contents-container table:last-child {
margin-bottom:5px;
}
.cal-contents-container:last-child {
margin-bottom:100px;
}
/* S館内案内S _____________________________________*/
.guide img {
max-width:100%;
height: auto;
}
.guide {
margin-bottom:5px;
text-align:center;
max-width:100%;
height: auto;
}
.guide li {
margin-bottom:80px;
}
.guide1 {
text-align:center;
}
.guide1 img {
margin-top:30px;
width:0 auto;
border-bottom: 3px dotted #727171;
}
.guide1 p{
padding:10px;
display:inline-block;
text-align:center;
}
.guide1-1 {
margin-bottom:50px;
}
.guide1-1 img{
max-width:100%;
height: auto;
padding:10px;
}
/* SイベントS _____________________________________*/
#event-icon {
width:60%;
margin:0 auto 40px;
}
#event-icon ul li {
margin-bottom:10px;
margin-right:30px;
margin-left:30px;
}
#event-icon ul li:last-child {
margin-bottom:0px;
}
#event-icon ul li:first-child{
margin-top:20px;
}
/* 追加↓
#event-icon ul li img{
width:40%;
}
*/
/**イベント(2カラム) Sここから**/
/*
.event-contents {
margin-top:50px;
}
*/
.event-contents table{
margin-left: auto;
margin-right: auto;
}
.event-2columu-1{
margin-bottom:30px;
letter-spacing:0em;
}
.event-2columu-1 table{
width:90%;
margin-bottom:20px;
}
.event-2columu-1 table:last-child{
margin-bottom:5px;
}
.event-2columu-1:last-child{
margin-bottom:5px;
}
.event-2columu-1 table td{
padding: 10px 10px;
}
.event-2columu-1 img{
margin-bottom:10px;
width:100%;
text-align:center;
}
.event-2columu-1 b {
font-weight:bold;
color:#333;
margin:0;
line-height:140%;
}
.event-2columu-2{
margin-bottom:30px;
letter-spacing:0em;
}
.event-2columu-2 table{
width:90%;
margin-top:30px;
margin-bottom:20px;
}
.event-2columu-2 table td{
padding: 5px 10px;
}
.event-2columu-2 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-2columu-2 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-2columu-3{
margin-bottom:50px;
letter-spacing:0em;
}
.event-2columu-3 h1{
font-size:25px;
font-weight:bold;
}
.event-2columu-3 h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.event-2columu-3 table{
width:90%;
margin-top:30px;
margin-bottom:20px;
}
.event-2columu-3 table td{
padding: 5px 10px;
}
.event-2columu-3 table td strong{
color:#FFF;
line-height:100%;
}
.event-2columu-3 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-2columu-3 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-2columu-4{
margin-bottom:30px;
letter-spacing:0em;
}
.event-2columu-4 h1{
font-size:25px;
font-weight:bold;
}
.event-2columu-4 h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.event-2columu-4 table{
width:90%;
margin-top:30px;
margin-bottom:20px;
}
.event-2columu-4 table td{
padding: 5px 10px;
}
.event-2columu-4 table td strong{
color:#FFF;
line-height:100%;
}
.event-2columu-4 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-2columu-4 b {
font-weight:bold;
margin:0;
line-height:140%;
}
/**イベント(2カラム) Sここまで**/
/**イベント(3カラム) Sここから**/
.event-3columu-1{
margin-bottom:30px;
letter-spacing:0em;
}
.event-3columu-1 table{
width:90%;
margin-bottom:20px;
}
.event-3columu-1 table:last-child{
margin-bottom:5px;
}
.event-3columu-1:last-child{
margin-bottom:5px;
}
.event-3columu-1 table td{
padding: 10px 10px;
}
.event-3columu-1 img{
margin-bottom:10px;
width:100%;
text-align:center;
}
.event-3columu-1 b {
font-weight:bold;
color:#333;
margin:0;
line-height:140%;
}
/**----------------------↓↓あとから追加したスマホ用 .event-3columu メロン休日などの三種まとめのときに使う---------------------------------------------**/
.event-3columu-1-1{
margin-bottom:30px;
letter-spacing:0em;
}
.event-3columu-1-1 table{
margin-bottom:20px;
width:90%;
}
.event-3columu-1-1 table:last-child{
margin-bottom:5px;
}
.event-3columu-1-1:last-child{
margin-bottom:5px;
}
.event-3columu-1-1 table td{
padding: 10px 10px;
}
.event-3columu-1-1 img{
margin-bottom:10px;
width:100%;
text-align:center;
}
.event-3columu-1-1 b {
font-weight:bold;
color:#333;
margin:0;
line-height:140%;
}
/**----------------------↑↑あとから追加したスマホ用 .event-3columu メロン休日などの三種まとめのときに使う---------------------------------------------**/
.event-3columu-2{
margin-bottom: 30px;
letter-spacing: 0em;
}
.event-3columu-2 table{
width:90%;
margin-top:30px;
margin-bottom:20px;
}
.event-3columu-2 table td{
padding: 5px 10px;
}
.event-3columu-2 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-3columu-2 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-3columu-2 img{
margin-bottom:10px;
width:100%;
text-align:center;
}
.event-3columu-3{
margin-bottom:50px;
letter-spacing:0em;
}
.event-3columu-3 h1{
font-size:25px;
font-weight:bold;
}
.event-3columu-3 h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.event-3columu-3 table{
width:90%;
margin-bottom:20px;
}
.event-3columu-3 table td{
padding: 5px 10px;
}
.event-3columu-3 table td strong{
color:#FFF;
line-height:100%;
}
.event-3columu-3 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-3columu-3 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-3columu-4{
margin-bottom:30px;
letter-spacing:0em;
}
.event-3columu-4 h1{
font-size:25px;
font-weight:bold;
}
.event-3columu-4 h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.event-3columu-4 table{
width:90%;
margin-top:30px;
margin-bottom:20px;
}
.event-3columu-4 table td{
padding: 5px 10px;
}
.event-3columu-4 table td strong{
color:#FFF;
line-height:100%;
}
.event-3columu-4 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-3columu-4 b {
font-weight:bold;
margin:0;
line-height:140%;
}
/**イベント(3カラム) Sここまで**/
/* SスイーツS _____________________________________*/
#sweets_title img {
margin-bottom:0;
margin-top:20px;
max-width:100%;
height: auto;
}
#sweets_title {
text-align:center;
}
#sweets_title p {
display:inline-block;
text-align:left;
}
#sweets {
width:90%;
margin:0 auto 60px;
}
#sweets ul {
margin-top:50px;
font-size:0;
letter-spacing:-1em;
}
#sweets ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:30px;
letter-spacing:0em;
padding:0 5px;
background-color:#FFFFFF;
}
#sweets h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:2px;
margin-bottom:0;
line-height:100%;
}
#sweets h2{
font-size:17px;
font-weight:bold;
color:#DF394A;
text-align:left;
margin-bottom:3;
}
#sweets ul li img {
width:100%;
margin-bottom:7px;
margin-top:5px;
}
#sweets {
width:90%;
margin:0 auto 60px;
}
#sweets img{
width:0 auto;
}
#sweets ul {
font-size:0;
letter-spacing:-1em;
}
#sweets ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:4%;
letter-spacing:0em;
}
#sweets ul li p {
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size:15px;
text-align:center;
line-height:150%;
margin-bottom:10px;
}
#sweets ul li p strong{
font-size:22px;
}
#sweets ul li a {
padding:5px 10px;
font-weight:bold;
}
/* S観光案内S _____________________________________*/
#aichi {
text-align:center;
margin-bottom:20px;
}
#aichi img {
max-width: 85%;
height: auto;
}
#kanko {
width:80%;
margin:0 auto;
}
#kanko ul {
font-size:0;
letter-spacing:-1em;
}
#kanko ul li {
width:45%;
text-align:center;
margin-bottom:10px;
display:inline-block;
vertical-align:top;
margin-right:10%;
letter-spacing:0em;
}
#kanko ul li:nth-child(2n) {
margin-right:0;
}
#kanko ul li:last-child {
margin-bottom:0px;
}
#kanko ul li img {
width:100%;
border-radius:100%;
margin-bottom:10px;
}
#kanko-spot {
width:90%;
margin:0 auto 60px;
}
#kanko-spot ul {
margin-top:50px;
font-size:0;
letter-spacing:-1em;
}
#kanko-spot ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:40px;
letter-spacing:0em;
padding:15px;
background-color:#FFFFFF;
box-shadow:3px 3px 8px;
border:1px solid #CCC;
}
#kanko-spot h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:5px;
margin-bottom:5px;
line-height:100%;
}
#kanko-spot h2{
font-size:15px;
font-weight:bold;
margin-bottom:5px;
color:#DF394A;
text-align:left;
}
#kanko-spot p{
text-align:left;
line-height:140%;
}
#kanko-spot ul li img {
width:100%;
margin-bottom:7px;
}
/**宿泊施設 Sここから**/
#yado-spot {
width:70%;
margin:0 auto;
}
#yado-spot ul {
margin-top:50px;
letter-spacing:-1em;
}
#yado-spot ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:40px;
letter-spacing:0em;
padding:10px 5px 0 5px;
background-color:#FFFFFF;
box-shadow:3px 3px 8px;
border:1px solid #CCC;
}
#yado-spot h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:5px;
line-height:100%;
}
#yado-spot h2{
font-size:15px;
font-weight:bold;
color:#DF394A;
text-align:left;
}
#yado-spot a:hover {
color:#999;
}
#yado-spot p{
text-align:left;
line-height:150%;
}
/**宿泊施設 Sここまで**/
/* S求人情報S _____________________________________*/
.recruit-contents-container{
width:90%;
margin-top:70px;
margin-left: auto;
margin-right: auto;
}
.recruit-contents-container table {
margin-left: auto;
margin-right: auto;
}
/* SコースS _____________________________________*/
#course1 {
width:80%;
margin:0 auto 40px;
}
#course1 ul {
font-size:0;
letter-spacing:-1em;
}
#course1 ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:30px;
letter-spacing:0em;
}
#course1 ul li:last-child {
margin-bottom:0px;
}
#course1 ul li p {
margin-bottom:10px;
}
#course1 ul li img {
width:100%;
border-radius:20px;
}
#course1 ul li:first-child{
margin-top:20px;
}
#course2 {
width:80%;
margin:0 auto 40px;
}
#course2 ul {
font-size:0;
letter-spacing:-1em;
}
#course2 ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:100px;
letter-spacing:0em;
}
#course2 ul li:last-child {
margin-bottom:0px;
}
#course2 ul li p {
margin-bottom:10px;
font-weight:bold;
}
#course2 ul li img {
margin-bottom:10px;
width:100%;
}
#course2 h3 {
font-weight:bold;
padding:10px;
}
#course2 .movie-wrap .third {
margin-top: 0px;
}
#course2 p {
border-style:solid;
border-width:1px;
padding:5px 5px 5px 5px;
background:#ffffff;
box-shadow: 3px 3px 3px #AAA;
}
.absolute {
position: absolute;
bottom: 1%;
left: 10%;
font-weight:bold;
font-size:90%;
text-align:left;
}
.absolute p {
line-height: 120%;
}
.relative {
position: relative;
}
#course2 .arrow {
text-align:center;
width:25%;
}
.course-contents-container1 table{
margin-left: auto;
margin-right: auto;
}
.course-contents-container1 {
text-alingn:center;
font-size:25px;
}
.course-inner-wrapper1 table{
width:60%;
margin-bottom:10px;
background-image: url(../img/background_spring.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-color:#FFF;
padding: 1em;
border: 3px solid #ccc;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}
.course-inner-wrapper1 p{
width:90%;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
text-align:left;
padding-bottom: .1em;
}
.course-inner-wrapper2 table{
width:60%;
margin-bottom:10px;
background-image: url(../img/background_summer.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-color:#FFF;
padding: 1em;
border: 3px solid #ccc;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}
.course-inner-wrapper2 p{
width:90%;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
text-align:left;
padding-bottom: .1em;
}
.course-inner-wrapper3 table{
width:60%;
margin-bottom:15px;
background-image: url(../img/background_autumn.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-color:#FFF;
padding: 1em;
border: 3px solid #ccc;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}
.course-inner-wrapper3 p{
width:90%;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
text-align:left;
padding-bottom: .1em;
}
.course-inner-wrapper4 table{
width:60%;
margin-bottom:15px;
background-image: url(../img/background_winter.gif);
background-repeat: no-repeat;
background-position: right bottom;
background-color:#FFF;
padding: 1em;
border: 3px solid #ccc;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}
.course-inner-wrapper4 p{
width:90%;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
text-align:left;
padding-bottom: .1em;
}
.course-inner-wrapper5 table{
width:60%;
margin-bottom:30px;
background-image: url(../img/background_castle.jpg);
background-repeat: no-repeat;
background-position: right bottom;
background-color:#FFF;
padding: 1em;
border: 5px solid #CCC;
border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}
.course-inner-wrapper5 p{
width:90%;
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
text-align:center;
}
.course-color01 {
color:#ff5252;
}
.course-color02 {
color:#79a850;
}
.course-color03 {
color:#df9026;
}
.course-color04 {
color:#1965a2;
}
.course-color05 {
color:#9a2424;
}
body.modelcourse{
color:#666;
font:14px/1.6 Century Gothic,'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
overflow-x:hidden;
background-image:url(../img/course-background.png);
background-repeat:repeat;
}
/* S食事メニューS _____________________________________*/
#menuk {
width:90%;
margin:0 auto;
}
#menuk ul {
margin-top:50px;
font-size:0;
letter-spacing:-1em;
}
#menuk ul li {
border:1px solid #EEE;
box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-webkit-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px;
-moz-box-shadow:rgba(122, 122, 122, 0.0588235) 0px 0px 6px 3px; text-align:center;
margin-bottom:30px;
letter-spacing:0em;
padding:0 5px;
background-color:#FFFFFF;
}
#menuk h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:2px;
margin-bottom:0;
line-height:100%;
}
#menuk h2{
font-size:17px;
font-weight:bold;
color:#DF394A;
text-align:left;
margin-bottom:3;
}
#menuk ul li img {
width:100%;
margin-bottom:7px;
margin-top:5px;
}
#menuk {
width:90%;
margin:0 auto 5px;
}
#menuk img{
width:0 auto;
}
#menuk ul {
font-size:0;
letter-spacing:-1em;
}
#menuk ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:4%;
letter-spacing:0em;
padding:0px 10px;
}
#menuk ul li p {
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size:15px;
text-align:left;
line-height:150%;
margin-bottom:10px;
}
#menuk ul li p strong{
font-size:22px;
}
#menuk ul li a {
padding:5px 5px;
font-weight:bold;
}
.menu-comment {
width:90%;
text-align:left;
margin:0 auto;
padding-top:10px;
margin-bottom:80px;
letter-spacing:0em;
}
.menu-comment p {
font-weight:bold;
color:#333;
margin:0;
line-height:140%;
}
.menu-comment b {
font-weight:bold;
color:#F74D51;
margin-bottom:10px;
line-height:140%;
display: inline-block;
text-align: left;
}
.menubh-contents{
width:100%;
margin:0 auto;
letter-spacing:-1em;
}
.menubh-contents h1{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:25px;
font-weight:bold;
}
.menubh-contents h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.menubh{
width:90%;
margin:50px auto 0;
padding-bottom:50px;
letter-spacing:0em;
}
.menubh img{
display:block;
width:100%;
text-align:center;
}
.menubh table {
padding:10px 0 30px;
}
.menubh table img{
width:auto;
}
.menubh strong{
color:#FFF;
}
.menubh td, th {
padding: 5px 10px;
line-height: 150%;
letter-spacing: 0em;
}
.menubh p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:150%;
}
/* SアクセスS _____________________________________*/
#access1 {
width:50%;
margin:0 auto 60px;
}
#access1 ul {
font-size:0;
letter-spacing:-1em;
}
#access1 ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:30px;
}
#access1 ul li:last-child {
margin-bottom:0px;
}
#access1 ul li p {
margin-bottom:10px;
}
#access1 ul li:first-child{
margin-top:20px;
}
/***車・電車***/
.contents-container {
width:90%;
margin: 0 auto;
}
.access-inner-wrapper {
width:90%;
margin:70px auto;
}
.access-inner-wrapper img {
display: block;
width:100%;
margin-bottom:20px;
text-align:center;
}
/***自転車***/
.contents-container-cycle {
width:90%;
margin: 0 auto;
}
.cycle-inner-wrapper {
width:90%;
margin:70px auto;
}
.cycle-inner-wrapper img.cycle-title {
width:100%;
margin:0 auto;
text-align:center;
}
.cycle-inner-wrapper img {
display: block;
width:100%;
margin-top:20px;
text-align:center;
}
.contents-container-cycle p {
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
.cycle-inner-wrapper p.text1 {
font-weight:bold;
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
.cycle-inner-wrapper .cycle p.text3 {
color:#FB2F34;
font-weight:bold;
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
/* SログインS _____________________________________*/
.login-contents-container{
width:90%;
text-align:center;
margin:0 auto;
}
.login-inner-wrepper{
margin-bottom:30px;
}
.login-inner-wrepper h1{
text-align:center;
font-size:25px;
margin:0;
}
.login-inner-wrepper formTable{
display:block;
margin:0 auto;
}
.login-inner-wrepper p{
text-align:left;
margin:0;
}
.login-contents-container .login{
margin-bottom:50px;
}
.login-inner-wrepper .login p.readMore a {
display:inherit;
padding: 1em;
margin: 0 5em ;
font-weight: bold;
text-align: center;
text-decoration: none;
background: #ebc416;
color: #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #999;
-webkit-box-shadow: 1px 1px 2px #999;
box-shadow: 1px 1px 2px #999;
}
.login-inner-wrepper .login p.readMore a:hover {
background: #f3dd74;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
box-shadow: 0px 0px 2px #999;
}
.login-inner-wrepper .pass p.readMore a {
display:inherit;
padding: 1em;
margin: 0 5em ;
font-weight: bold;
text-align: center;
text-decoration: none;
background: #078FBC;
color: #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #999;
-webkit-box-shadow: 1px 1px 2px #999;
box-shadow: 1px 1px 2px #999;
}
.login-inner-wrepper .pass p.readMore a:hover {
background: #5AB5EB;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
box-shadow: 0px 0px 2px #999;
}
.under {
border-bottom: dotted 2px #87CEFA;
}
/* S多言語S _____________________________________*/
#Language {
width:70%;
margin:0 auto;
}
#Language ul {
font-size:0;
letter-spacing:-1em;
}
#Language ul li {
width:45%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:10%;
letter-spacing:0em;
}
#Language ul li:nth-child(2n) {
margin-right:0;
}
#Language ul li:last-child {
margin-bottom:0px;
}
#Language ul li p {
margin-bottom:10px;
font-size:16px;
text-align:center;
letter-spacing:0em;
}
#Language ul li img {
width:100%;
border-radius:100%;
margin-bottom:10px;
}
#pull-down {
font-size:15px;
margin:15px 10px 5px 0;
}
#pull-down img{
margin:5px 5px 5px 10px;
vertical-align:bottom;
}
/* Sよくある質問S _____________________________________*/
#sp-faqmenu {
width:100%;
text-align:center;
margin:0 auto 60px;
}
#sp-faqmenu ul {
font-size:0;
}
#sp-faqmenu ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:10px;
}
#sp-faqmenu ul li:last-child {
margin-bottom:0px;
}
#sp-faqmenu ul li p {
margin-bottom:10px;
}
#sp-faqmenu ul li:first-child{
margin-top:20px;
}
.faq-conteiner img {
margin-top:30px;
max-width:100%;
height: auto;
}
.faq-conteiner {
text-align:center;
}
/* Sよくある質問項目S _____________________________________*/
.syncer-acdn-faq {
margin: 5px 0 10px 0;
text-align:left;
display:inline-block;
}
.syncer-acdn-faq dt ,
.syncer-acdn-faq dd {
padding: 4px 0 ;
}
.syncer-acdn-faq dt:hover {
cursor: pointer ;
color: #777 ;
}
.syncer-acdn-faq dt {
font-weight: 700 ;
}
.syncer-acdn-faq dd {
display: none ;
padding: 12px 0 1.5em 1.5em ;
}
/* SリフィールS _____________________________________*/
.refill-conteiner {
width:80%;
margin:0 auto;
text-align:center;
}
.refill-inner-wrapper img {
width:90%;
font-size:16px;
text-align:center;
margin-bottom:30px;
}
.course-inner-wrapper h1{
font-size:25px;
padding: 10px;
color:#ffffff;
margin-bottom: 100px;
border: 5px double #333333;
border-radius: 10px;
background-color:#F4B54A;
width:80%;
display:inline-block;
font-size:25px;
font-weight:bold;
}
/* SグーグルマップS _____________________________________*/
#google-maps {
position: relative;
padding-bottom:100%;
height: 0;
overflow: hidden;
}
#google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* SタイトルS _____________________________________*/
.title img {
max-width:100%;
height: auto;
}
.title {
margin-bottom:5px;
text-align:center;
max-width:100%;
height: auto;
}
.title p {
font-size:17px;
display:inline-block;
text-align:left;
}
#subtitle img {
margin-bottom:10px;
max-width:100%;
height: auto;
}
#subtitle {
text-align:center;
}
#subtitle p {
display:inline-block;
text-align:left;
}
#subtitle1 img {
margin-top:50px;
max-width:100%;
height: auto;
}
#subtitle1 {
text-align:center;
}
#subtitle1 p {
display:inline-block;
text-align:left;
}
/* SリンクS _____________________________________*/
figure.link {
margin-bottom:100px;
max-width:100%;
height: auto;
text-align: center;
padding:5px;
}
.link-design table {
width: 28%;
margin-bottom:30px;
}
.link-design table th, table td {
padding: 10px;
}
.link-design table th {
text-align: center;
width: 10%;
}
@media screen and (max-width: 600px) {
.link-design table {
/** borde:none; **/
}
.link-design table td {
display: block;
text-align: center;
}
.link-design table th {
display: block;
/** border-top: none;
border-bottom: none; **/
width: 100%;
}
}
/* S電話番号S _____________________________________*/
#access{
padding: 3em 0 1em 0;
max-width:100%;
height: auto;
text-align: center;
}
#access img{
width:80%;
}
/* SトップページS _____________________________________*/
.pagetop {
display: none;
position: fixed;
bottom: 30px;
right: 15px;
z-index:1000;
}
.pagetop a {
display: block;
background-color:#000000;
text-align: center;
color:#FFFFFF;
font-size: 12px;
text-decoration: none;
padding: 5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
.pagetop a:hover {
display: block;
background-color:#000000;
text-align: center;
color:#CCC;
font-size: 12px;
text-decoration: none;
padding:5px 10px;
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}
/* SフッターS _____________________________________*/
footer{
font-family:"メイリオ", "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", "Osaka-mono", "monospace";
font-size:15px;
color:#2F2F2F;
background-color:#FF8359;
padding:30px;
text-align:center;
}
footer b {
font-size:20px;
}
footer a:hover {
color: #FFF;
}
body{
margin:0;
}
#header{
background-color:#FF8359;
}
#title{
font-family:"メイリオ", "ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", "Osaka-mono", "monospace";
margin:0;
}
footer img.o_logo{
vertical-align: bottom;
}
/* Section Dividers Backgrounds */
.divider4 {
background-image: url('../img/bg/divider4.jpg');
}
.divider6 {
background-image: url('../img/bg/divider6.jpg');
}
/**========================================**/
/**====Sリフィールタブメニュー開始====**/
/**========================================**/
ul#tabs-list {
list-style: none;
text-align: center;
border-bottom: 1px solid #dfdfdf;
margin: -5px auto;
padding: 0;
}
label.panel-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
/**ラベル幅**/
width: 100%;
color: #bdc3c7;
cursor: pointer;
background-color: #ecf0f1;
-webkit-transition-property: border-top, background-color, color;
transition-property: border-top, background-color, color;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
label.panel-label:hover {
/**タブ：オンマウス時 線の色**/
color: #999;
}
#panels {
background-color: white;
}
#panels .container {
margin: 0 auto;
width: 100%;
}
#panels section header label.panel-label {
padding: 12px 24px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#panels section main {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-height: 0;
opacity: 0;
-webkit-transition: opacity 600ms;
transition: opacity 600ms;
overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 50px 24px;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 50px 24px;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 50px 24px;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
border-left: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #f7931e;
/**タブ線・文字色**/
border-top: 6px solid #f7931e;
padding-top: 5px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
border-left: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
/**タブ線・文字色**/
color: #3fa9f5;
border-top: 6px solid #3fa9f5;
padding-top: 5px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
border-left: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
/**タブ線・文字色**/
color: #F6C;
border-top: 6px solid #F6C;
padding-top: 5px;
}
ul#tabs-list li {
/**タブ：文字サイズ**/
font-size: 150%;
}
input[type="radio"]{
display:none;
}
/**/
/**業者ページコンテンツ**/
.tabContent {
display: none;
padding: 20px;
background: white;
}
.tabContent-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.tabContent2 {
display: none;
padding: 20px;
background: white;
}
.tabContent-grid2 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.agent-contents table {
border-collapse: collapse;
width: 100%;
}
.agent-contentstable th,
table td {
padding: 5px;
}
.agent-contents table th {
text-align: center;
width: 40%;
}
.agent-block {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (max-width: 600px) {
.agent-contents table {
border-top: 0px solid #999;
}
.agent-contents table td {
display: inline-block;
text-align: center;
}
.agent-contents table th {
display: block;
/**改行**/
border-top: none;
border-bottom: none;
width: 100%;
}
.tabContent-grid2 {
display: block;
width: 100%;
}
}
/**業者ページコンテンツ**/
/*スマホここまで*/
/*タブレットここから*/
@media screen and (min-width: 600px) and (max-width: 959px) {
.flexbox {
display: -webkit-flex;
display: flex;
}
.main {
margin: 0 10px 0 0;
}
.top-contents-container{
width:90%;
margin:0 auto;
letter-spacing:-1em;
}
.top-inner-wrapper{
width:46%;
margin-top:30px;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.top-inner-wrapper:nth-child(2n){
margin:right:0;
}
.top-inner-wrapper img{
width:100%;
display:block;
margin-bottom:10px;
}
#sub dt img {
padding-top:20px;
max-width:20%;
}
/* M果物狩りM _____________________________________*/
.fruit-contents1 {
width:80%;
margin-left: auto;
margin-right: auto;
}
.fruit-contents1-1 table{
margin-left: auto;
margin-right: auto;
}
.movie-wrap {
margin-bottom:30px;
}
.yoyaku table{
margin-bottom:30px;
}
/* fruit カレンダー設定一部変更～タブ～*/
.fruit-contents1-1-1 {
width:45%;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.fruit-contents1-2 .yoyaku {
width:45%;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.fruit-contents1-2:nth-child(2n) {
margin-right:0%;
}
/* M果物狩り詳細M _____________________________________*/
.fruit-contents-container{
width:90%;
margin:0 auto;
letter-spacing:-1em;
}
.fruit-inner-wrapper{
width:46%;
margin-top:30px;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.fruit-inner-wrapper:nth-child(2n){
margin:right:0;
}
.fruit-inner-wrapper img{
width:100%;
display:block;
margin-bottom:10px;
}
/* M果物狩り料金表M _____________________________________*/
#fruitprice {
margin-bottom:10px;
}
#fruitprice table {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
#fruitprice table {
width:70%;
margin-left: auto;
margin-right: auto;
}
#pc-fruitprice {
padding-top:2em;
}
#pc-fruitprice table{
width:70%;
margin-left: auto;
margin-right: auto;
}
#pc-fruitprice:last-child{
margin-bottom:80px;
}
#pc-fruitprice table td{
padding: 5px 5px;
}
#pc-fruitprice table td strong{
color:#FFFFFF;
line-height:150%;
}
#pc-fruitprice{
display:block;
}
#sp-fruitprice{
display:none;
}
/* M果物狩りカレンダーM _____________________________________*/
#sp-fruitcal1 table:last-child{
margin-bottom:80px;
}
#sp-fruitcal2 table:last-child{
margin-bottom:80px;
}
/* M館内案内M _____________________________________*/
.guide img {
max-width:60%;
height: auto;
}
.guide {
margin-bottom:5px;
text-align:center;
max-width:100%;
height: auto;
}
.guide li {
margin-bottom:80px;
}
.guide1 {
text-align:center;
}
.guide1 img {
margin-top:30px;
width:0 auto;
border-bottom: 3px dotted #727171;
}
.guide1 p{
padding:10px;
display:inline-block;
text-align:center;
}
.guide1-1 {
margin-bottom:50px;
text-align:center;
max-width:100%;
height: auto;
}
.guide1-1 img{
max-width:80%;
height: auto;
padding:10px;
}
/* MイベントM 追加_____________________________________*/
#event-icon {
width:90%;
}
#event-icon ul li {
margin-right:20px;
}
#event-icon ul li {
width:20%;
font-size:16px;
text-align:center;
margin-right:30px;
display:inline-block;
vertical-align:top;
letter-spacing:0em;
}
#event-icon ul li:nth-child(4n) {
margin-right:0%;
}
/*
#event-icon ul li img {
width:100%;
}
*/
#event-icon ul li img.second, .third, .forth{
margin-top:20px;
}
/******************************************* 旧 LイベントL _____________________________________
#event-icon {
width:50%;
}
#event-icon ul li {
width:20%;
font-size:16px;
text-align:center;
margin:0 5px;
display:inline-block;
vertical-align:top;
letter-spacing:0em;
}
#event-icon ul li:nth-child(4n) {
margin-right:0%;
}
#event-icon ul li img {
width:100%;
}
#event-icon ul li img.second, .third, .forth{
margin-top:20px;
}
******************************************* 旧 LイベントL 終わり _____________________________________*/
/**イベント(2カラム) Mここから**/
.event-contents{
width:90%;
margin:0 auto;
letter-spacing:-1em;
}
.event-contents table{
margin-left: auto;
margin-right: auto;
}
.event-contents-2columu {
width:90%;
margin:0 auto;
letter-spacing:-1em;
}
.event-2columu-1{
margin-top:10px;
margin-right:4%;
display:inline-block;
vertical-align:top;
width:48%;
letter-spacing:0em;
margin-bottom:30px;
}
.event-2columu-1 table{
width:100%;
margin-bottom:20px;
}
.event-2columu-1:nth-child(2n){
margin-right:0;
}
.event-2columu-2{
margin-bottom:40px;
letter-spacing:0em;
}
.event-2columu-2 table{
width:60%;
margin-top:30px;
margin-bottom:20px;
}
.event-2columu-2 table td{
padding: 5px 10px;
}
.event-2columu-2 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-2columu-2 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-2columu-3{
margin-bottom:30px;
letter-spacing:0em;
}
.event-2columu-3 h1{
font-size:25px;
font-weight:bold;
}
.event-2columu-3 h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.event-2columu-3 table{
width:100%;
margin-top:30px;
margin-bottom:20px;
}
.event-2columu-3 table td{
padding: 5px 10px;
}
.event-2columu-3 table td strong{
color:#FFF;
line-height:100%;
}
.event-2columu-3 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-2columu-3 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-2columu-4{
margin-right:4%;
display:inline-block;
vertical-align:top;
width:48%;
letter-spacing:0em;
margin-bottom:30px;
}
.event-2columu-4 table{
width:100%;
margin-bottom:20px;
}
.event-2columu-4:nth-child(2n){
margin-right:0;
}
/**イベント(2カラム) Mここまで**/
/**イベント(3カラム) Mここから**/
.event-3columu-1{
margin-top:10px;
margin-right:4%;
display:inline-block;
vertical-align:top;
width:30%;
letter-spacing:0em;
margin-bottom:30px;
}
.event-3columu-1 table{
width:100%;
margin-bottom:20px;
}
.event-3columu-1:nth-child(3n){
margin-right:0;
}
/**----------------------↓↓あとから追加したタブレット用 .event-3columu メロン休日などの三種まとめのときに使う---------------------------------------------**/
.event-3columu-1-1{
margin-bottom:30px;
letter-spacing:0em;
}
.event-3columu-1-1 table{
margin-bottom:20px;
max-width:70%;
}
.event-3columu-1-1 table:last-child{
margin-bottom:5px;
}
.event-3columu-1-1:last-child{
margin-bottom:5px;
}
.event-3columu-1-1 table td{
padding: 10px 10px;
}
.event-3columu-1-1 img{
margin-bottom:10px;
width:100%;
text-align:center;
}
.event-3columu-1-1 b {
font-weight:bold;
color:#333;
margin:0;
line-height:140%;
}
/**----------------------↑↑あとから追加したスマホ用 .event-3columu メロン休日などの三種まとめのときに使う---------------------------------------------**/
.event-3columu-2{
margin-bottom:40px;
letter-spacing:0em;
}
.event-3columu-2 table{
width:60%;
margin-top:30px;
margin-bottom:20px;
}
.event-3columu-2 table td{
padding: 5px 10px;
}
.event-3columu-2 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-3columu-2 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-3columu-3{
margin-bottom:30px;
letter-spacing:0em;
}
.event-3columu-3 h1{
font-size:25px;
font-weight:bold;
}
.event-3columu-3 h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.event-3columu-3 table{
width:100%;
margin-top:30px;
margin-bottom:20px;
}
.event-3columu-3 table td{
padding: 5px 10px;
}
.event-3columu-3 table td strong{
color:#FFF;
line-height:100%;
}
.event-3columu-3 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-3columu-3 b {
font-weight:bold;
margin:0;
line-height:140%;
}
/**イベント(3カラム) Mここまで**/
/* M観光案内M _____________________________________*/
#aichi {
text-align:center;
margin-bottom:50px;
}
#aichi img {
max-width: 80%;
height: auto;
}
#kanko {
width:60%;
margin:0 auto;
}
#kanko ul {
font-size:0;
letter-spacing:-1em;
}
#kanko ul li {
width:22%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:0%;
letter-spacing:0em;
}
#kanko ul li:last-child {
margin-bottom:0px;
margin-right:0;
}
#kanko ul li img {
width:100%;
border-radius:100%;
margin-bottom:10px;
}
#kanko-spot {
width:90%;
margin:0 auto;
}
#kanko-spot ul {
margin-top:50px;
letter-spacing:-1em;
}
#kanko-spot ul li {
width:30%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:4%;
letter-spacing:0em;
}
#kanko-spot h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:2px;
line-height:100%;
}
#kanko-spot h2{
font-size:17px;
font-weight:bold;
color:#DF394A;
text-align:left;
}
#kanko-spot ul li img {
width:100%;
margin-bottom:5px;
display: block;
margin:auto;
}
#kanko-spot {
width:90%;
margin:0 auto 60px;
}
#kanko-spot ul {
font-size:0;
letter-spacing:-1em;
}
#kanko-spot ul li p {
font-size:15px;
text-align:left;
line-height:150%;
margin-bottom:10px;
}
#kanko-spot ul li a {
padding:5px 10px;
font-weight:bold;
}
#kanko-spot ul li:nth-child(3n) {
margin-right:0%;
}
#kanko-spot ul li:last-child {
margin-bottom:0px;
}
#kanko-spot ul li img.second{
margin-top:20px;
}
/**宿泊施設 Mここから**/
#yado-spot {
margin:0 auto;
text-align:center;
}
#yado-spot ul {
margin-top:50px;
font-size:0;
letter-spacing:-1em;
}
#yado-spot ul li {
width:70%;
font-size:16px;
text-align:center;
margin-bottom:30px;
letter-spacing:0em;
padding:10px;
display:inline-block;
vertical-align:top;
margin-right:4%;
letter-spacing:0em;
}
#yado-spot h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:2px;
line-height:100%;
}
#yado-spot h2{
font-size:17px;
font-weight:bold;
color:#DF394A;
text-align:left;
}
#yado-spot {
width:90%;
margin:0 auto 60px;
}
#yado-spot ul {
font-size:0;
letter-spacing:-1em;
}
#yado-spot ul li p {
font-size:20px;
text-align:left;
line-height:150%;
margin-bottom:10px;
}
#yado-spot ul li a {
padding:5px 10px;
font-weight:bold;
}
#yado-spot a:hover {
color:#999;
}
#yado-spot ul li:last-child {
margin-bottom:0px;
}
#yado-spot ul li img.second{
margin-top:20px;
}
/**宿泊施設 Mここまで**/
/* MモデルコースM _____________________________________*/
#course1 {
width:80%;
margin:0 auto 40px;
}
#course1 ul {
font-size:0;
letter-spacing:-1em;
}
#course1 ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:30px;
letter-spacing:0em;
}
#course1 ul li:last-child {
margin-bottom:0px;
}
#course1 ul li p {
margin-bottom:10px;
}
#course1 ul li img {
width:100%;
border-radius:20px;
}
#course1 ul li:first-child{
margin-top:20px;
}
#course2 {
width:90%;
margin:0 auto 60px;
}
#course2 ul {
font-size:0;
letter-spacing:-1em;
}
#course2 ul li {
width:30%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:5%;
letter-spacing:0em;
}
#course2 ul li:nth-child(3n) {
margin-right:0%;
}
#course2 ul li p {
margin-bottom:10px;
}
#course2 ul li img {
width:100%;
}
#course2 ul li:last-child {
margin-bottom:0px;
}
#course2 ul li img.second{
margin-top:20px;
}
#course2 ul li img.third{
margin-top:20px;
}
.absolute {
position: absolute;
bottom: 7%;
left: 10%;
font-weight:bold;
font-size:110%;
text-align:left;
}
.absolute p {
line-height: 140%;
}
.relative {
position: relative;
}
/* M食事メニューM _____________________________________*/
#menuk {
width:100%;
margin:0 auto;
padding-bottom:5px;
}
#menuk ul {
margin-top:50px;
font-size:0;
letter-spacing:-1em;
}
#menuk h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:2px;
margin-bottom:0;
line-height:100%;
}
#menuk h2{
font-size:17px;
font-weight:bold;
color:#DF394A;
text-align:left;
margin-bottom:3;
}
#menuk ul li img {
width:100%;
margin-bottom:7px;
margin-top:5px;
}
#menuk ul li {
width:30%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:4%;
letter-spacing:0em;
padding:0 3px;
}
#menuk ul li p {
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size:15px;
text-align:left;
line-height:150%;
margin-bottom:10px;
padding:0 3px;
}
#menuk ul li p strong{
font-size:22px;
}
#menuk ul li a {
padding:5px 10px;
font-weight:bold;
}
#menuk ul li:nth-child(3n) {
margin-right:0%;
}
#menuk ul li:last-child {
margin-bottom:0px;
}
#menuk ul li img.second{
margin-top:20px;
}
.menu-comment {
width:90%;
text-align:left;
margin:0 auto;
margin-bottom:80px;
letter-spacing:0em;
}
.menu-comment p {
font-weight:bold;
color:#333;
margin:0;
line-height:140%;
display: inline-block;
text-align: left;
}
.menu-comment b {
font-weight:bold;
color:#F74D51;
margin-bottom:10px;
line-height:140%;
display: inline-block;
text-align: left;
}
.menubh-contents{
width:90%;
margin:0 auto;
letter-spacing:-1em;
}
.menubh-contents h1{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:25px;
font-weight:bold;
}
.menubh-contents h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.menubh{
width:49%;
margin-top:30px;
margin-right:3%;
display:inline-block;
vertical-align:top;
letter-spacing:0em;
}
.menubh:nth-child(2n){
margin:0;
}
.menubh:last-child{
margin-top:30px;
}
.menubh img{
display:block;
width:100%;
text-align:center;
}
.menubh table {
padding:10px 0 20px;
}
.menubh table img{
width:auto;
}
.menubh strong{
color:#FFF;
}
.menubh td, th {
padding: 5px 10px;
line-height: 150%;
letter-spacing: 0em;
}
.menubh p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:150%;
}
/* MログインM _____________________________________*/
.login-contents-container{
width:90%;
text-align:center;
margin:0 auto;
}
.login-inner-wrepper{
margin-bottom:30px;
}
.login-inner-wrepper h1{
text-align:center;
font-size:25px;
margin:0;
}
.login-inner-wrepper p{
text-align:left;
margin:0;
}
.login-contents-container .login{
margin-bottom:50px;
}
.login-inner-wrepper .login p.readMore a {
display:inherit;
padding: 1em;
margin: 0 5em ;
font-weight: bold;
text-align: center;
text-decoration: none;
background: #ebc416;
color: #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #999;
-webkit-box-shadow: 1px 1px 2px #999;
box-shadow: 1px 1px 2px #999;
}
.login-inner-wrepper .login p.readMore a:hover {
background: #f3dd74;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
box-shadow: 0px 0px 2px #999;
}
/* M多言語M _____________________________________*/
#Language {
width:50%;
margin:0 auto;
}
#Language ul {
font-size:0;
letter-spacing:-1em;
}
#Language ul li {
width:45%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:10%;
letter-spacing:0em;
}
#Language ul li:nth-child(2n) {
margin-right:0;
}
#Language ul li:last-child {
margin-bottom:0px;
}
#Language ul li p {
margin-bottom:10px;
font-size:16px;
text-align:center;
letter-spacing:0em;
}
#Language ul li img {
width:100%;
border-radius:100%;
margin-bottom:10px;
}
#pull-down {
font-size:15px;
margin:15px 10px 5px 0;
}
/* Mよくある質問M _____________________________________*/
#sp-faqmenu{
display:none;
}
.faq-conteiner{
width:100%;
margin:0 auto;
letter-spacing:-1em;
}
.faq-inner-wrapper{
width:100%;
margin-top:30px;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.faq-inner-wrapper:nth-child(3n){
margin-left:0;
}
.faq-inner-wrapper img{
width:50%;
display:block;
margin: 0 auto;
margin-bottom:20px;
}
/* MアクセスM _____________________________________*/
#access1 {
width:60%;
margin:0 auto 60px;
}
#access1 ul {
font-size:0;
letter-spacing:-1em;
}
#access1 ul li {
width:30%;
font-size:16px;
text-align:center;
margin-bottom:5px;
display:inline-block;
vertical-align:top;
margin-right:5%;
letter-spacing:0em;
}
#access1 ul li:nth-child(3n) {
margin-right:0%;
}
#access1 ul li img {
width:100%;
}
#access1 ul li:last-child {
margin-bottom:0px;
}
#access1 ul li p {
margin-bottom:10px;
}
#access1 ul li img.second{
margin-top:20px;
}
#access1 ul li img.third{
margin-top:20px;
}
/***車・電車***/
.contents-container {
width:80%;
margin: 0 auto;
letter-spacing: -1em;
}
.access-inner-wrapper {
margin-top: 30px;
margin-right: 4%;
display: inline-block;
vertical-align: top;
width:46%;
letter-spacing: 0em;
}
.access-inner-wrapper:nth-child(2n) {
margin-right:0;
}
.access-inner-wrapper img {
display: block;
margin-bottom:20px;
width:100%;
}
/***自転車***/
.contents-container-cycle {
width:85%;
margin: 0 auto;
}
.cycle-inner-wrapper {
width:90%;
margin:0 auto;
}
.cycle-inner-wrapper img.cycle-title {
width:60%;
margin:0 auto;
text-align:center;
}
.cycle-inner-wrapper img {
display: block;
width:100%;
margin-top:20px;
text-align:center;
}
.contents-container-cycle p {
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
.cycle-inner-wrapper p.text1 {
font-weight:bold;
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
.cycle-inner-wrapper .cycle p.text3 {
color:#FB2F34;
font-weight:bold;
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
/******** M-refill ********/
/**2行**
.refill-conteiner {
width:90%;
margin:0 auto;
text-align:center;
}
.refill-inner-wrapper{
width:47%;
font-size:16px;
text-align:center;
margin-bottom:5px;
display:inline-block;
vertical-align:top;
margin-right:3%;
letter-spacing:0em;
}
.refill-inner-wrapper:nth-child(2n) {
margin-right:0%;
}
.course-inner-wrapper h1{
font-size:25px;
padding: 10px;
color:#ffffff;
margin-bottom: 100px;
border: 5px double #333333;
border-radius: 10px;
background-color:#F4B54A;
width:70%;
display:inline-block;
font-size:25px;
font-weight:bold;
text-align:center;
}
**/
/**3行**/
.refill-conteiner {
width:90%;
margin:0 auto;
text-align:center;
}
.refill-inner-wrapper{
width:30%;
font-size:16px;
text-align:center;
margin-bottom:5px;
display:inline-block;
vertical-align:top;
margin-right:3%;
letter-spacing:0em;
}
.refill-inner-wrapper:nth-child(3n) {
margin-right:0%;
}
.course-inner-wrapper h1{
font-size:25px;
padding: 10px;
color:#ffffff;
margin-bottom: 100px;
border: 5px double #333333;
border-radius: 10px;
background-color:#F4B54A;
width:70%;
display:inline-block;
font-size:25px;
font-weight:bold;
text-align:center;
}
/* MグーグルマップM _____________________________________*/
#google-maps {
position: relative;
padding-bottom: 40%;
height: 0;
overflow: hidden;
}
#google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/* MタイトルM _____________________________________*/
.title img {
max-width:100%;
height: auto;
}
.title {
margin-bottom:30px;
margin-top:20px;
text-align:center;
}
.title p {
display:inline-block;
text-align:left;
}
/* M電話番号M _____________________________________*/
#access{
padding: 3em 0 1em 0;
max-width:100%;
height: auto;
text-align: center;
}
#access img{
width:50%;
}
/**========================================**/
/**====Mリフィールタブメニュー開始====**/
/**========================================**/
label.panel-label:hover {
/**タブ：オンマウス時 線の色**/
color: #999;
}
#panels {
background-color: white;
}
#panels .container {
margin: 0 auto;
width: 90%;
}
#panels section header label.panel-label {
padding: 12px 24px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#panels section main {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-height: 0;
opacity: 0;
-webkit-transition: opacity 600ms;
transition: opacity 600ms;
overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 50px 24px;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 50px 24px;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 50px 24px;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
border-left: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #f7931e;
/**タブ線・文字色**/
border-top: 6px solid #f7931e;
/**タブ選択時幅**/
padding-top: 1px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
border-left: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
/**タブ線・文字色**/
color: #3fa9f5;
border-top: 6px solid #3fa9f5;
/**タブ選択時幅**/
padding-top: 1px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
border-left: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
/**タブ線・文字色**/
color: #F6C;
border-top: 6px solid #F06;
/**タブ選択時幅**/
padding-top: 1px;
}
ul#tabs-list li {
display: inline-block;
text-align: center;
/**タブ：文字サイズ**/
font-size: 150%;
width: 30%;
-webkit-box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
border-top: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
-webkit-transition-property: border-top;
transition-property: border-top;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
input[type="radio"]{
display:none;
}
/**========================================**/
/**====Mリフィールタブメニュー終了====**/
/**========================================**/
}
/*タブレットここまで*/
/*PCここから*/
@media screen and (min-width: 960px) {
.top-contents-container{
width:90%;
margin:0 auto;
letter-spacing:-1em;
}
.top-inner-wrapper{
width:46%;
margin-top:30px;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.top-inner-wrapper:nth-child(2n){
margin:right:0;
}
.top-inner-wrapper img{
width:100%;
display:block;
margin-bottom:10px;
}
#sub dt img {
padding-top:20px;
max-width:30%;
}
/** マウスオーバーで拡大 大きさ固定 **/
#photototo {
max-width: 380px;
margin: 0 auto;
text-align: center;
}
#photototo li {
display: inline-block;
width: 100%;
}
#photototo li a {
display: block;
width: 100%;
height: auto;
overflow: hidden;
}
#photototo img {
width: 80%;
height: auto;
transition: .3s ease-in-out;
}
#photototo a:hover img {
transform: scale(1.1, 1.1);
-webkit-transform: scale(1.1, 1.1);
-moz-transform: scale(1.1, 1.1);
-o-transform: scale(1.1, 1.1);
-ms-transform: scale(1.1, 1.1);
}
/* L果物狩りL _____________________________________*/
.fruit-contents1-1 {
width:45%;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
/* fruit カレンダー設定一部変更～PC～*/
.fruit-contents1-1-1 {
width:45%;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.fruit-contents1-1:nth-child(2n) {
margin-right:0%;
}
.movie-wrap {
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.movie-wrap2 {
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.movie-wrap2 iframe {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 90%;
margin-left:30px;
}
.yoyaku table{
margin-bottom:30px;
}
.fruit-contents1-2 .yoyaku {
width:45%;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.fruit-contents1-2:nth-child(2n) {
margin-right:0%;
}
/* L果物狩り詳細L _____________________________________*/
.fruit-contents-container{
width:60%;
margin:0 auto;
letter-spacing:-1em;
}
.fruit-inner-wrapper{
width:46%;
margin-top:30px;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.fruit-inner-wrapper:nth-child(2n){
margin:right:0;
}
.fruit-inner-wrapper img{
width:100%;
display:block;
margin-bottom:10px;
}
/* L果物狩り料金表L _____________________________________*/
#fruitprice {
margin-bottom:30px;
}
#fruitprice table {
margin-left: auto;
margin-right: auto;
}
#fruitprice table {
width:50%;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
}
#pc-fruitprice {
padding-top:3em;
width:70%;
margin-left: auto;
margin-right: auto;
display:block;
}
#pc-fruitprice:last-child{
margin-bottom:80px;
}
#pc-fruitprice table td{
padding: 5px 5px;
}
#pc-fruitprice table td strong{
color:#FFFFFF;
line-height:150%;
}
#sp-fruitprice{
display:none;
}
/* L果物狩りカレンダーL _____________________________________*/
.cal-inner-wrapper{
width:46%;
margin-top:30px;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.cal-contents-container{
width:60%;
margin:0 auto;
letter-spacing:-1em;
}
.cal-inner-wrapper:nth-child(2n){
margin:right:0;
}
/* L館内案内L _____________________________________*/
.guide img {
max-width:50%;
height: auto;
}
.guide {
margin-bottom:5px;
text-align:center;
max-width:100%;
height: auto;
}
.guide li {
margin-bottom:80px;
}
.guide .coment {
max-width:35%;
}
.guide1 {
text-align:center;
}
.guide1 img {
margin-top:30px;
width:0 auto;
border-bottom: 3px dotted #727171;
}
.guide1 p{
padding:10px;
display:inline-block;
text-align:center;
}
.guide1-1 {
margin-bottom:50px;
text-align:center;
max-width:100%;
height: auto;
}
.guide1-1 img{
max-width:60%;
height: auto;
padding:10px;
}
/* LイベントL 追加 _____________________________________*/
#event-icon {
/* width:45%; */
/* 追加↓ */
max-width:800px;
width:100%;
}
#event-icon ul{
width:100%;
}
#event-icon ul li {
/* width:13%; */
width:15%;
padding-right:3px;
font-size:16px;
text-align:center;
margin:0 4px;
/* margin:0 15px; */
display:inline-block;
vertical-align:top;
letter-spacing:0em;
}
#event-icon ul li:nth-child(6n) {
margin-right:0%;
}
#event-icon ul li img {
width:130px;
}
/*
#event-icon ul li img {
width:100%;
}
*/
#event-icon ul li img.second, .third, .forth, .fifth, .sixth{
margin-top:20px;
}
/******************************************* 旧 LイベントL _____________________________________
#event-icon {
width:30%;
}
#event-icon ul li {
width:20%;
font-size:16px;
text-align:center;
margin:0 5px;
display:inline-block;
vertical-align:top;
letter-spacing:0em;
}
#event-icon ul li:nth-child(4n) {
margin-right:0%;
}
#event-icon ul li img {
width:100%;
}
#event-icon ul li img.second, .third, .forth{
margin-top:20px;
}
****************************************** 旧 LイベントL 終わり _____________________________________*/
/**イベント(2カラム) Lここから**/
.event-contents{
width:50%;
margin:0 auto;
letter-spacing:-1em;
}
.event-contents table{
margin-left: auto;
margin-right: auto;
}
.event-contents-2columu {
width:90%;
margin:0 auto;
max-width:60%;
letter-spacing:-1em;
}
.event-2columu-1{
margin-top:35px;
margin-right:4%;
display:inline-block;
vertical-align:top;
width:48%;
letter-spacing:0em;
margin-bottom:30px;
}
.event-2columu-1 table{
width:100%;
margin-bottom:20px;
}
.event-2columu-1:nth-child(2n){
margin-right:0;
}
.event-2columu-2{
margin-bottom:30px;
letter-spacing:0em;
}
.event-2columu-2 table{
width:65%;
margin-top:30px;
margin-bottom:20px;
}
.event-2columu-2 table td{
padding: 5px 10px;
}
.event-2columu-2 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-2columu-2 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-2columu-3{
margin-bottom:30px;
letter-spacing:0em;
}
.event-2columu-3 h1{
font-size:25px;
font-weight:bold;
}
.event-2columu-3 h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.event-2columu-3 table{
width:100%;
margin-top:30px;
margin-bottom:20px;
}
.event-2columu-3 table td{
padding: 5px 10px;
}
.event-2columu-3 table td strong{
color:#FFF;
line-height:100%;
}
.event-2columu-3 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-2columu-3 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-2columu-4{
margin-right:4%;
display:inline-block;
vertical-align:top;
width:48%;
letter-spacing:0em;
margin-bottom:30px;
}
.event-2columu-4 table{
width:100%;
margin-bottom:20px;
}
.event-2columu-4:nth-child(2n){
margin-right:0;
}
/**イベント(2カラム) Lここまで**/
/**イベント(3カラム) Lここから**/
.event-contents-3columu {
width:90%;
margin:0 auto;
max-width:70%;
letter-spacing:-1em;
}
.event-3columu-1{
margin-top:35px;
margin-right:5%;
display:inline-block;
vertical-align:top;
width:30%;
letter-spacing:0em;
margin-bottom:30px;
}
.event-3columu-1 table{
width:100%;
margin-bottom:20px;
}
.event-3columu-1:nth-child(3n){
margin-right:0;
}
.event-3columu-2{
margin-bottom:30px;
letter-spacing:0em;
}
.event-3columu-2 table{
width:65%;
margin-bottom:20px;
}
.event-3columu-2 table td{
padding: 5px 10px;
}
.event-3columu-2 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-3columu-2 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-3columu-3{
margin-bottom:30px;
letter-spacing:0em;
}
.event-3columu-3 h1{
font-size:25px;
font-weight:bold;
}
.event-3columu-3 h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.event-3columu-3 table{
width:100%;
margin-top:30px;
margin-bottom:20px;
}
.event-3columu-3 table td{
padding: 5px 10px;
}
.event-3columu-3 table td strong{
color:#FFF;
line-height:100%;
}
.event-3columu-3 p {
font-weight:bold;
color:#F36366;
margin:0;
line-height:100%;
margin-bottom:5px;
display: inline-block;
text-align: left;
}
.event-3columu-3 b {
font-weight:bold;
margin:0;
line-height:140%;
}
.event-3columu-4{
margin-right:5%;
display:inline-block;
vertical-align:top;
width:30%;
margin-bottom:30px;
}
.event-3columu-4 table{
width:100%;
margin-bottom:20px;
margin-left: auto;
margin-right: auto;
}
.event-3columu-4:nth-child(3n){
margin-right:0;
}
/**イベント(3カラム) Lここまで**/
/* L観光案内L _____________________________________*/
#aichi {
text-align:center;
margin-bottom:50px;
}
#aichi img {
max-width: 40%;
height: auto;
}
#kanko {
width:60%;
margin:0 auto;
}
#kanko ul {
font-size:0;
letter-spacing:-1em;
}
#kanko ul li {
width:22%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:0%;
letter-spacing:0em;
}
#kanko ul li:last-child {
margin-bottom:0px;
margin-right:0;
}
#kanko ul li img {
width:70%;
border-radius:100%;
margin-bottom:10px;
}
#kanko-spot {
width:90%;
margin:0 auto 60px;
}
#kanko-spot ul {
margin-top:50px;
letter-spacing:-1em;
}
#kanko-spot ul li {
width:30%;
font-size:16px;
text-align:center;
margin-bottom:30px;
letter-spacing:0em;
padding:15px;
background-color:#FFFFFF;
display:inline-block;
vertical-align:top;
margin-right:3%;
}
#kanko-spot h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:2px;
line-height:100%;
}
#kanko-spot h2{
font-size:17px;
font-weight:bold;
color:#DF394A;
text-align:left;
}
#kanko-spot ul li img {
width:100%;
margin-bottom:5px;
display: block;
margin:auto;
}
#kanko-spot {
width:80%;
margin:0 auto 60px;
}
#kanko-spot ul li p {
font-size:15px;
text-align:left;
line-height:150%;
margin-bottom:10px;
}
#kanko-spot ul li a {
padding:5px 10px;
font-weight:bold;
}
#kanko-spot ul li:nth-child(4n) {
margin-right:3%;
}
#kanko-spot ul li:last-child {
margin-bottom:0px;
}
#kanko-spot ul li img.second{
margin-top:20px;
}
/* L宿泊施設L _____________________________________*/
#yado-spot {
width:70%;
margin:0 auto 60px;
}
#yado-spot ul {
margin-top:50px;
font-size:0;
letter-spacing:-1em;
}
#yado-spot h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:15px;
line-height:100%;
}
#yado-spot h2{
font-size:17px;
font-weight:bold;
color:#DF394A;
text-align:left;
}
#yado-spot ul li {
width:30%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:4%;
letter-spacing:0em;
}
#yado-spot ul li p {
font-size:20px;
text-align:left;
line-height:150%;
margin-bottom:10px;
}
#yado-spot ul li a {
padding:10px;
font-weight:bold;
}
#yado-spot a:hover {
color:#999;
}
#yado-spot ul li:nth-child(3n) {
margin-right:0%;
}
#yado-spot ul li:last-child {
margin-bottom:0px;
}
#yado-spot ul li img.second{
margin-top:20px;
}
/* LコースL _____________________________________*/
#course1 {
width:80%;
margin:0 auto 40px;
}
#course1 ul {
font-size:0;
letter-spacing:-1em;
}
#course1 ul li {
width:100%;
font-size:16px;
text-align:center;
margin-bottom:30px;
letter-spacing:0em;
}
#course1 ul li:last-child {
margin-bottom:0px;
}
#course1 ul li p {
margin-bottom:10px;
}
#course1 ul li img {
width:100%;
border-radius:20px;
}
#course1 ul li:first-child{
margin-top:20px;
}
#course2 {
width:90%;
margin:0 auto 60px;
}
#course2 ul {
font-size:0;
letter-spacing:-1em;
}
#course2 ul li {
width:30%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:5%;
letter-spacing:0em;
}
#course2 ul li:nth-child(3n) {
margin-right:0%;
}
#course2 ul li p {
margin-bottom:10px;
}
#course2 ul li img {
width:100%;
}
#course2 ul li:last-child {
margin-bottom:0px;
}
#course2 ul li img.second{
margin-top:20px;
}
#course2 ul li img.third{
margin-top:20px;
}
.absolute {
position: absolute;
bottom: 7%;
left: 10%;
font-weight:bold;
font-size:110%;
text-align:left;
}
.absolute p {
line-height: 150%;
}
.relative {
position: relative;
}
/* L食事メニューL _____________________________________*/
#menuk ul {
margin-top:50px;
font-size:0;
letter-spacing:-1em;
}
#menuk h1{
font-size:25px;
font-weight:bold;
text-align:center;
padding-top:2px;
margin-bottom:0;
line-height:100%;
}
#menuk h2{
font-size:17px;
font-weight:bold;
color:#DF394A;
text-align:left;
margin-bottom:3;
}
#menuk ul li img {
width:95%;
margin-bottom:7px;
margin-top:5px;
}
#menuk ul li {
width:20%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:5%;
letter-spacing:0em;
padding:0 3px;
}
#menuk ul li p {
font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
font-size:15px;
text-align:left;
line-height:150%;
margin-bottom:10px;
padding:0 3px;
}
#menuk ul li p strong{
font-size:22px;
}
#menuk ul li a {
padding:5px 10px;
font-weight:bold;
}
#menuk ul li:nth-child(3n) {
margin-right:0%;
}
#menuk ul li:last-child {
margin-bottom:0px;
}
#menuk ul li img.second{
margin-top:20px;
}
.menu-comment {
width:90%;
text-align: center;
margin:0 auto;
padding-bottom:50px;
letter-spacing:0em;
}
.menu-comment p {
font-weight:bold;
color:#333;
margin:0;
line-height:140%;
display: inline-block;
text-align: left;
}
.menu-comment b {
font-weight:bold;
color:#F74D51;
margin-bottom:10px;
line-height:140%;
display: inline-block;
text-align: left;
}
.menubh-contents{
width:70%;
margin:0 auto;
letter-spacing:-1em;
}
.menubh-contents h1{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:25px;
font-weight:bold;
}
.menubh-contents h2{
width:100%;
text-align:center;
margin:0 auto 7px;
letter-spacing:0em;
font-size:20px;
font-weight:bold;
}
.menubh{
width:45%;
margin-top:30px;
margin-right:10%;
display:inline-block;
vertical-align:top;
letter-spacing:0em;
}
.menubh:nth-child(2n){
margin:0;
}
.menubh:last-child{
margin-top:30px;
}
.menubh img{
display:block;
width:100%;
text-align:center;
}
.menubh table {
padding:10px 0 20px;
}
.menubh table p {
font-weight:bold;
color:#F74D51;
margin:0 auto;
line-height:140%;
display: inline-block;
text-align: left;
}
.menubh table img{
width:0 auto;
}
.menubh strong{
color:#FFF;
}
.menubh td, th {
padding: 5px 10px;
line-height: 150%;
letter-spacing: 0em;
}
.menubh p {
font-weight:bold;
color:#F36366;
margin:0 auto;
line-height:150%;
}
.menubh p img{
display:block;
width:60%;
text-align:center;
margin:0 auto;
}
/* LログインL _____________________________________*/
.login-contents-container{
width:40%;
text-align:center;
margin:0 auto;
}
.login-inner-wrepper{
margin-bottom:100px;
}
.login-inner-wrepper h1{
text-align:center;
font-size:25px;
margin:0;
}
.login-inner-wrepper p{
text-align:left;
margin:0;
}
.login-contents-container .login{
margin-bottom:50px;
}
.login-inner-wrepper .login p.readMore a {
display:inherit;
padding: 1em;
margin: 0 5em ;
font-weight: bold;
text-align: center;
text-decoration: none;
background: #ebc416;
color: #ffffff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px 2px #999;
-webkit-box-shadow: 1px 1px 2px #999;
box-shadow: 1px 1px 2px #999;
}
.login-inner-wrepper .login p.readMore a:hover {
background: #f3dd74;
-moz-box-shadow: 0px 0px 2px #999;
-webkit-box-shadow: 0px 0px 2px #999;
box-shadow: 0px 0px 2px #999;
}
/* LタイトルL _____________________________________*/
.title img {
max-width:70%;
height: auto;
}
.title {
margin-top:20px;
text-align:center;
}
.title p {
font-size:17px;
padding:10px 150px;
display:inline-block;
text-align:left;
}
/* L多言語L _____________________________________*/
#Language {
width:30%;
margin:0 auto;
}
#Language ul {
font-size:0;
letter-spacing:-1em;
}
#Language ul li {
width:45%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:10%;
letter-spacing:0em;
}
#Language ul li:nth-child(2n) {
margin-right:0;
}
#Language ul li:last-child {
margin-bottom:0px;
}
#Language ul li p {
margin-bottom:10px;
font-size:16px;
text-align:center;
letter-spacing:0em;
}
#Language ul li img {
width:100%;
border-radius:100%;
margin-bottom:10px;
}
#pull-down {
font-size:15px;
margin:15px 10px 5px 0;
}
/* Lよくある質問L _____________________________________*/
#sp-faqmenu{
display:none;
}
.faq-conteiner{
width:80%;
margin:0 auto;
letter-spacing:-1em;
}
.faq-inner-wrapper{
width:30%;
margin-top:30px;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.faq-inner-wrapper:nth-child(3n){
margin-left:0;
}
.faq-inner-wrapper img{
width:50%;
display:block;
margin-bottom:20px;
margin: 0 auto;
}
/* LアクセスL _____________________________________*/
#access1 {
width:50%;
margin:0 auto 40px;
}
#access1 ul {
font-size:0;
letter-spacing:-1em;
}
#access1 ul li {
width:30%;
font-size:16px;
text-align:center;
margin-bottom:30px;
display:inline-block;
vertical-align:top;
margin-right:5%;
letter-spacing:0em;
}
#access1 ul li:nth-child(3n) {
margin-right:0%;
}
#access1 ul li img {
width:70%;
}
#access1 ul li:last-child {
margin-bottom:0px;
}
#access1 ul li p {
margin-bottom:10px;
}
#access1 ul li img.second{
margin-top:20px;
}
#access1 ul li img.third{
margin-top:20px;
}
/***車・電車***/
.contents-container {
width:1000px;
margin:0 auto;
letter-spacing: -1em;
}
.access-inner-wrapper {
margin-top: 100px;
margin-right: 3%;
display: inline-block;
vertical-align: top;
width:47%;
letter-spacing: 0em;
}
.access-inner-wrapper:nth-child(2n) {
margin-right:0;
}
.access-inner-wrapper img {
display: block;
margin-bottom:20px;
width:100%;
}
/***自転車***/
.contents-container-cycle {
width:50%;
margin: 0 auto;
}
.cycle-inner-wrapper {
width:80%;
margin:0 auto;
}
.cycle-inner-wrapper img.cycle-title {
width:60%;
margin:0 auto;
text-align:center;
}
.cycle-inner-wrapper img {
display: block;
width:100%;
margin-top:20px;
text-align:center;
}
.contents-container-cycle p {
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
.cycle-inner-wrapper p.text1 {
font-weight:bold;
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
.cycle-inner-wrapper .cycle p.text3 {
color:#FB2F34;
font-weight:bold;
margin-top:10px;
line-height:150%;
display:inline-block;
text-align:left;
}
/******** L-refill ********/
/**2行
.refill-conteiner {
width:50%;
margin:0 auto;
text-align:center;
}
.refill-inner-wrapper{
width:40%;
font-size:16px;
text-align:center;
margin-bottom:5px;
display:inline-block;
vertical-align:top;
margin-right:10%;
letter-spacing:0em;
}
.refill-inner-wrapper:nth-child(2n) {
margin-right:0%;
}
.course-inner-wrapper h1{
font-size:25px;
padding: 10px;
color:#ffffff;
margin-bottom: 100px;
border: 5px double #333333;
border-radius: 10px;
background-color:#F4B54A;
width:40%;
display:inline-block;
font-size:25px;
font-weight:bold;
text-align:center;
}
**/
/**3行**/
.refill-conteiner {
width:70%;
margin:0 auto;
text-align:center;
}
.refill-inner-wrapper{
width:20%;
font-size:16px;
text-align:center;
margin-bottom:5px;
display:inline-block;
vertical-align:top;
margin-right:5%;
letter-spacing:0em;
}
.refill-inner-wrapper:nth-child(3n) {
margin-right:0%;
}
.course-inner-wrapper h1{
font-size:25px;
padding: 10px;
color:#ffffff;
margin-bottom: 100px;
border: 5px double #333333;
border-radius: 10px;
background-color:#F4B54A;
width:40%;
display:inline-block;
font-size:25px;
font-weight:bold;
text-align:center;
}
/**========================================**/
/**====L-リフィールタブメニュー開始====**/
/**========================================**/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400|Inconsolata);
ul#tabs-list {
list-style: none;
text-align: center;
border-bottom: 1px solid #dfdfdf;
margin: -5px auto;
padding: 0;
}
label.panel-label {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
display: block;
/**ラベル幅**/
width: 100%;
color: #bdc3c7;
cursor: pointer;
background-color: #ecf0f1;
-webkit-transition-property: border-top, background-color, color;
transition-property: border-top, background-color, color;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
label.panel-label:hover {
/**タブ：オンマウス時 線の色**/
color: #999;
}
#panels {
background-color: white;
}
#panels .container {
margin: 0 auto;
width: 90%;
}
#panels section header label.panel-label {
padding: 12px 24px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#panels section main {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
max-height: 0;
opacity: 0;
-webkit-transition: opacity 600ms;
transition: opacity 600ms;
overflow-y: hidden;
}
#panel-1-ctrl:checked ~ #panels #panel-1 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 30px 10px;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 30px 10px;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
max-height: initial;
opacity: 1;
/**コンテンツ幅**/
padding: 30px 10px;
}
@media all and (max-width: 767px) {
#nav-ctrl:checked ~ #tabs-list #li-for-panel-1 {
max-height: 46px;
opacity: 1;
}
#nav-ctrl:checked ~ #tabs-list #li-for-panel-2 {
max-height: 46px;
opacity: 1;
}
#nav-ctrl:checked ~ #tabs-list #li-for-panel-3 {
max-height: 46px;
opacity: 1;
}
#open-nav-label {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
}
#nav-ctrl:checked ~ #tabs-list #open-nav-label {
display: none;
}
#close-nav-label {
display: block;
max-height: 0;
overflow-y: hidden;
background-color: #444444;
color: #ecf0f1;
padding: 0px;
-webkit-transition: max-height 200ms;
transition: max-height 200ms;
cursor: pointer;
text-transform: uppercase;
font-size: 12px;
line-height: 22px;
letter-spacing: 1px;
}
#nav-ctrl:checked ~ #tabs-list #close-nav-label {
max-height: 36px;
opacity: 1;
padding: 12px 24px;
}
#tabs-list {
position: relative;
}
#tabs-list label.panel-label {
padding: 12px 0;
}
#tabs-list #li-for-panel-1 {
max-height: 0;
overflow-y: hidden;
-webkit-transition: max-height 200ms;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-2 {
max-height: 0;
overflow-y: hidden;
-webkit-transition: max-height 200ms;
transition: max-height 200ms;
}
#tabs-list #li-for-panel-3 {
max-height: 0;
overflow-y: hidden;
-webkit-transition: max-height 200ms;
transition: max-height 200ms;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
max-height: 46px;
opacity: 1;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #c0392b;
background-color: #c0392b;
color: white;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
max-height: 46px;
opacity: 1;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
color: #c0392b;
background-color: #c0392b;
color: white;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
max-height: 46px;
opacity: 1;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
color: #c0392b;
background-color: #c0392b;
color: white;
}
#panels .container {
width: 100%;
}
#panels section header {
display: block;
}
}
@media all and (min-width: 768px) {
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 + li {
border-left: 1px solid #dfdfdf;
}
#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
background-color: white;
color: #f7931e;
/**タブ線・文字色**/
border-top: 6px solid #f7931e;
padding-top: 5px;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 + li {
border-left: 1px solid #dfdfdf;
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
background-color: white;
/**タブ線・文字色**/
color: #3fa9f5;
border-top: 6px solid #3fa9f5;
padding-top: 5px;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 {
pointer-events: none;
cursor: default;
-webkit-transform: translate(0, 1px);
-ms-transform: translate(0, 1px);
transform: translate(0, 1px);
-webkit-box-shadow: none;
box-shadow: none;
border-top: none;
border-right: none;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3:last-child {
border-right: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 + li {
border-left: 1px solid #dfdfdf;
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
background-color: white;
/**タブ線・文字色**/
color: #F6C;
border-top: 6px solid #F6C;
padding-top: 5px;
}
ul#tabs-list {
text-align: center;
border-bottom: 1px solid #dfdfdf;
}
ul#tabs-list li {
display: inline-block;
text-align: center;
/**タブ：文字サイズ**/
font-size: 200%;
width: 18%;
-webkit-box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0px -2px 2px rgba(0, 0, 0, 0.05);
border-top: 1px solid #dfdfdf;
border-right: 1px solid #dfdfdf;
-webkit-transition-property: border-top;
transition-property: border-top;
-webkit-transition-duration: 200ms;
transition-duration: 200ms;
}
ul#tabs-list li:hover {
border-top: none;
border-right: none;
}
ul#tabs-list li:hover:last-of-type {
border-right: 1px solid #dfdfdf;
}
ul#tabs-list li:hover + li {
border-left: 1px solid #dfdfdf;
}
ul#tabs-list li label.panel-label {
/**タブ：オンマウス時 線の色**/
border-top: 0px solid #999;
padding: 5px 0;
}
ul#tabs-list li label.panel-label:hover {
border-top-width: 6px;
padding-top: 5px;
}
#open-nav-label,
#close-nav-label {
display: none;
}
#nav-ctrl {
display: none;
}
}
@media all and (min-width: 960px) {
main {
max-width: 1800px;
margin: 0 auto;
}
}
.panel-radios {
position: fixed;
left: 50%;
top: 10px;
width: 20px;
opacity: 0.5;
z-index: 99;
display:none;
}
.panel-radios:nth-child(1) {
-webkit-transform: translateX(-50px);
-ms-transform: translateX(-50px);
transform: translateX(-50px);
display:none;
}
.panel-radios:nth-child(2) {
-webkit-transform: translateX(-30px);
-ms-transform: translateX(-30px);
transform: translateX(-30px);
display:none;
}
.panel-radios:nth-child(3) {
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
display:none;
}
.panel-radios:nth-child(4) {
-webkit-transform: translateX(10px);
-ms-transform: translateX(10px);
transform: translateX(10px);
display:none;
}
.panel-radios:nth-child(5) {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
display:none;
}
.panel-radios:nth-child(6) {
top: 30px;
-webkit-transform: translateX(-10px);
-ms-transform: translateX(-10px);
transform: translateX(-10px);
display: block;
display:none;
}
/**背景**/
body {
background: f8f0e6;
color: #444444;
font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
}
#introduction {
width: 90%;
margin: 0 auto;
padding: 48px 24px;
color: white;
}
#introduction h1 {
font-weight: 300;
text-align: center;
}
main h1 {
margin-top: 0;
font-weight: 300;
color: #c0392b;
}
main p {
line-height: 1.8;
font-size: 24px;
}
main hr {
margin: 12px 0;
border-top: 1px solid #dfdfdf;
}
label.demo-label {
background-color: #c0392b;
color: white;
padding: 4px 8px;
border-radius: 2px;
cursor: pointer;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
label.demo-label:hover {
background-color: #e74c3c;
}
#demo-child-toggle {
display: none;
}
#demo-child-toggle:checked ~ #demo-parent #demo-child {
color: #c0392b;
font-weight: bold;
text-transform: uppercase;
}
#demo-parent {
margin-top: 8px;
}
code,
pre {
color: #c0392b;
font-family: Inconsolata, "Andale Mono", Andale, monowidth;
background-color: #ecf0f1;
border: 1px solid #dfdfdf;
border-radius: 2px;
}
code {
padding: 2px 6px;
}
pre {
padding: 12px;
line-height: 1.6;
}
pre strong {
color: #444444;
}
input[type="radio"]{
display:none;
}
/**========================================**/
/**====L-リフィールタブメニュー終了====**/
/**========================================**/
/**L-業者コンテンツ開始**/
.agent-contents{
width:80%;
margin:0 auto;
letter-spacing:0em;
text-align:center;
}
.agent-contents img{
margin:10px;
}
/* 旧
.agent-contents agent-line {
border-top: 1px solid #bbb;
}
*/
.agent-line {
height: 6px;
background-image: radial-gradient(
closest-side,
hsla(0, 0%, 50%, 1.0),
hsla(0, 0%, 50%, 0) 100%);
position: relative;
}
.agent-line:after {
position: absolute;
top: 50%;
left: 50%;
display:block;
background-color: hsl(0, 0%, 75%);
height: 12px;
width: 12px;
transform: rotate(45deg);
margin-top: -10px;
margin-left: -10px;
border-radius: 4px 0;
border: 4px solid hsla(0, 0%, 100%, 0.35);
background-clip: padding-box;
box-shadow: -10px 10px 0 hsla(0, 0%, 100%, 0.15), 10px -10px 0 hsla(0, 0%, 100%, 0.15);
}
/**L-業者コンテンツ終了**/
/******** L-googlemap ********/
#google-maps {
position: relative;
padding-bottom: 30%;
height: 0;
overflow: hidden;
}
#google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
/******** L-tel ********/
#access{
padding: 3em 0 1em 0;
max-width:100%;
height: auto;
text-align: center;
}
#access img{
width:25%;
}
}
}
/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 5px;
}
/* LモデルコースL _____________________________________*/
.modelcourse_menu{
text-align: center;
list-style-type: none;
}
a{
color: #2F4F4F;
}
h4 {
position: relative;
padding: .5em .75em;
font-size:100%;
}
.youtube iframe{
width: 100%;
}
h5{
font-size:200%;
}
a {
color: #000000;
word-wrap: break-word;
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
a:hover,
a:focus {
color: #CC3300;
text-decoration: none;
outline: 0;
}
a:before,
a:after {
-webkit-transition: color 0.1s ease-in, background 0.1s ease-in;
-moz-transition: color 0.1s ease-in, background 0.1s ease-in;
-ms-transition: color 0.1s ease-in, background 0.1s ease-in;
-o-transition: color 0.1s ease-in, background 0.1s ease-in;
transition: color 0.1s ease-in, background 0.1s ease-in;
}
h1.modelcouse{
font-size:250% ;
border: double 15px #ffffff;
background-color:#ff9933;
line-height: 100px;
padding-left:10px;
}
.modelcourse-movie{
margin-top:50px;
text-align:center;
}
.modelcourse-main{
}
.modelcourse-main p{
text:2em;
position: relative;
padding: 0.25em 1em;
border: solid 1px #000000;
border-radius: 5px;
background-color:#FFF;
font-weight:bold;
margin-top:0px;
width:auto;
}
/* ==========================================================================
Image Mask
========================================================================== */
.grid figure {
margin: 0;
position: relative;
}
.grid figure img {
width: 100%;
display: block;
position: relative;
}
.grid figcaption {
position: absolute;
top: 0;
left: 0;
padding: 20px;
color: #fff;
background: #3498db;
}
.grid figcaption h5 {
margin: 0;
padding-top: 0px;
padding-left: 20px;
padding-bottom: 5px;
color: #fff;
font-weight: 700;
text-align: left;
letter-spacing: 2px;
}
.grid figcaption a {
text-align: left;
padding: 5px 10px;
margin-left: 20px;
display: inline-block;
background: #2f2f2f;
color: #fff;
font-size: 13px;
}
/* Caption Style */
.mask figure {
overflow: hidden;
}
.mask figure img {
-webkit-transition: -webkit-transform 0.4s;
-moz-transition: -moz-transform 0.4s;
transition: transform 0.4s;
}
.no-touch .mask figure:hover img,
.mask figure.cs-hover img {
-webkit-transform: translateY(-30px);
-moz-transform: translateY(-30px);
-ms-transform: translateY(-30px);
transform: translateY(-30px);
}
.mask figcaption {
height: 50px;
width: 100%;
top: auto;
bottom: 0;
opacity: 0;
-webkit-transform: translateY(100%);
-moz-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
transition: transform 0.4s, opacity 0.1s 0.3s;
}
.no-touch .mask figure:hover figcaption,
.mask figure.cs-hover figcaption {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
transform: translateY(0px);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
-moz-transition: -moz-transform 0.4s, opacity 0.1s;
transition: transform 0.4s, opacity 0.1s;
}
.mask figcaption a {
position: absolute;
top:10px;
bottom: 10px;
right: 30px;
}
/* ★★★↓スライドpc↓★★★*/
/* スライド 始め*/
.slide-pc {/*親div*/
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.slide-pc p1 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 2.5vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 8%;
top: 15%;
vertical-align: middle;
}
.slide-pc p2 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 2vw;
line-height: 5;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 9%;
top: 15%;
vertical-align: middle;
}
.slide-pc event-text {
position: absolute;
margin-top: 8%; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 1.5vw;
line-height: 2;/*行高*/
padding:5px 10px;/*文字周りの余白*/
right:8%;
top: 15%;
}
11/23,24,25みかん宝さがし
.slide-pc mikan-event {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 2.5vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 1%;
top: 15%;
vertical-align: middle;
}
11/23,24,25みかん宝さがし
/**クリスマスケーキ作り体験**/
.slide-pc-cake-make {/*親div*/
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.slide-pc-cake-make p1 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 2.5vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 12%;
top: 7%;
vertical-align: middle;
}
.slide-pc-cake-make event-text {
position: absolute;
margin-top: 3%; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 1.5vw;
line-height: 1.2;/*行高*/
padding:5px 10px;/*文字周りの余白*/
right:5%;
top: 10%;
}
.slide img {
width: 100%;
}
.br::before {
content: "\A" ;
white-space: pre ;
}
/* スライド 終わり*/
/* ★★★↑スライドpc↑★★★*/
/* ★★★↓イベントpc↓★★★*/
/* イベント 始め*/
.event-pc {/*親div*/
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.event-pc p1 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 2vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 20%;
top: 10%;
vertical-align: middle;
}
.event-pc p2 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 1.5vw;
line-height: 5;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 22%;
top: 10%;
vertical-align: middle;
}
.event-pc event-text {
position: absolute;
margin-top: 7%; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 1.2vw;
line-height: 1.5;/*行高*/
padding:5px 10px;/*文字周りの余白*/
right:20%;
top: 5%;
}
.event img {
width: 100%;
}
.br::before {
content: "\A" ;
white-space: pre ;
}
/* イベント 終わり*/
/* ★★★↑イベントpc↑★★★*/
/* ★★★↓各ページTOP画像↓★★★*/
/* TOP画像 始め*/
.top-image {/*親div*/
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.top-image meal {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 40%;
top: 50%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 1px; /* 文字間 */
text-shadow :
4px 4px 1px #C00,
-4px 4px 1px #C00,
4px -4px 1px #C00,
-4px -4px 1px #C00,
4px 0px 1px #C00,
0px 4px 1px #C00,
-4px 0px 1px #C00,
0px -4px 1px #C00; /* 文字の影 */
}
.top-image shopguide {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 2px 2px;/*文字周りの余白*/
right: 30%;
top: 50%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 1px; /* 文字間 */
text-shadow :
4px 4px 1px #C36,
-4px 4px 1px #C36,
4px -4px 1px #C36,
-4px -4px 1px #C36,
4px 0px 1px #C36,
0px 4px 1px #C36,
-4px 0px 1px #C36,
0px -4px 1px #C36; /* 文字の影 */
}
.top-image traders {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 2px 2px;/*文字周りの余白*/
right: 37%;
top: 30%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 2px; /* 文字間 */
text-shadow :
4px 4px 1px #03C,
-4px 4px 1px #03C,
4px -4px 1px #03C,
-4px -4px 1px #03C,
4px 0px 1px #03C,
0px 4px 1px #03C,
-4px 0px 1px #03C,
0px -4px 1px #03C; /* 文字の影 */
}
.top-image fruitpicking {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 2px 2px;/*文字周りの余白*/
right: 27%;
top: 50%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 2px; /* 文字間 */
text-shadow :
4px 4px 1px #066,
-4px 4px 1px #066,
4px -4px 1px #066,
-4px -4px 1px #066,
4px 0px 1px #066,
0px 4px 1px #066,
-4px 0px 1px #066,
0px -4px 1px #066; /* 文字の影 */
}
.top-image recruit {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 2px 2px;/*文字周りの余白*/
right: 35%;
top: 30%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 2px; /* 文字間 */
text-shadow :
4px 4px 1px #66C,
-4px 4px 1px #66C,
4px -4px 1px #66C,
-4px -4px 1px #66C,
4px 0px 1px #66C,
0px 4px 1px #66C,
-4px 0px 1px #66C,
0px -4px 1px #66C; /* 文字の影 */
}
.top-image qa {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 2px 2px;/*文字周りの余白*/
right: 42%;
top: 30%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 2px; /* 文字間 */
text-shadow :
4px 4px 1px #099,
-4px 4px 1px #099,
4px -4px 1px #099,
-4px -4px 1px #099,
4px 0px 1px #099,
0px 4px 1px #099,
-4px 0px 1px #099,
0px -4px 1px #099; /* 文字の影 */
}
.top-image access {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 2px 2px;/*文字周りの余白*/
right: 37%;
top: 30%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 2px; /* 文字間 */
text-shadow :
4px 4px 1px #930,
-4px 4px 1px #930,
4px -4px 1px #930,
-4px -4px 1px #930,
4px 0px 1px #930,
0px 4px 1px #930,
-4px 0px 1px #930,
0px -4px 1px #930; /* 文字の影 */
}
.top-image pass {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 2px 2px;/*文字周りの余白*/
right: 34%;
top: 35%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 2px; /* 文字間 */
text-shadow :
4px 4px 1px #B79800,
-4px 4px 1px #B79800,
4px -4px 1px #B79800,
-4px -4px 1px #B79800,
4px 0px 1px #B79800,
0px 4px 1px #B79800,
-4px 0px 1px #B79800,
0px -4px 1px #B79800; /* 文字の影 */
}
.top-image shopping {
position: absolute;
margin: 0; /*余計な隙間を除く*/
background: none;/*背景色*/
font-size: 7vw;
line-height: 1;/*行高*/
padding: 2px 2px;/*文字周りの余白*/
right: 38%;
top: 30%;
vertical-align: middle;
display : inline-block;
color : #ffffff; /* 文字の色 */
letter-spacing : 1px; /* 文字間 */
text-shadow :
4px 4px 1px #C03,
-4px 4px 1px #C03,
4px -4px 1px #C03,
-4px -4px 1px #C03,
4px 0px 1px #C03,
0px 4px 1px #C03,
-4px 0px 1px #C03,
0px -4px 1px #C03; /* 文字の影 */
}
.top-image img {
width: 100%;
margin-top: 30px;
}
/* TOP画像 終わり*/
/* ★★★↑各ページTOP画像↑★★★*/
/* ★★★↓スライド-スマホ↓★★★*/
/* スライド 始め*/
.slide-sumaho {/*親div*/
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.slide-sumaho p1 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 5vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 25%;
top: 5%;
vertical-align: middle;
}
.slide-sumaho p2 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 4.5vw;
line-height: 4;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 27%;
top: 5%;
vertical-align: middle;
}
.slide-sumaho event-text {
position: absolute;
margin-top: 9%; /*文章のスタート位置*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 4vw;
line-height: 1.5;/*改行の行間*/
padding:5px 10px;/*文字周りの余白*/
right:20%;
top: 9%;
}
/**クリスマスケーキ作り体験**/
.slide-sumaho-cake-make {/*親div*/
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.slide-sumaho-cake-make p1 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 5vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 18%;
top: 3%;
vertical-align: middle;
}
.slide-sumaho-cake-make event-text {
position: absolute;
margin-top: 3%; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 3vw;
line-height: 1.5;/*行高*/
padding:5px 10px;/*文字周りの余白*/
right:5%;
top: 5%;
}
/**いちご狩り予約開始**/
.slide-pc-ichigo-yoyaku {/*親div*/
position: relative;/*相対配置*/
/* display:table-cell; */
vertical-align:middle;
}
.slide-pc-ichigo-yoyaku p1 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: #333;/*文字色*/
background: none;/*背景色*/
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
margin-left: 60%;
top: 5%;
vertical-align: middle;
}
.slide-pc-ichigo-yoyaku p2 {
position: absolute;
margin: 0;
/*余計な隙間を除く*/
color: #333;
/*文字色*/
background: none;
/*背景色*/
font-size: 2.5vw;
line-height: 1;
/*行高*/
padding: 5px 10px;
/*文字周りの余白*/
vertical-align: middle;
}
.slide-pc-ichigo-yoyaku event-text {
position: absolute;
margin-top: 3%; /*余計な隙間を除く*/
color: #333;/*文字色*/
background: none;/*背景色*/
font-size: clamp(1rem, 1rem, 2rem);
line-height: 1.5;/*行高*/
padding:5px 10px;/*文字周りの余白*/
right:5%;
top: 100%;
}
.slide-pc-ichigo-yoyaku event-text2 {
position: absolute;
margin-top: 23%; /*余計な隙間を除く*/
color: #C00;/*文字色*/
background: none;/*背景色*/
font-size: 1.4vw;
line-height: 1.5;/*行高*/
padding:5px 10px;/*文字周りの余白*/
right:10%;
top: 45%;
}
.slide-sumaho-ichigo-yoyaku {/*親div*/
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.slide-sumaho-ichigo-yoyaku p1 {
position: absolute;
margin-top: 0; /*余計な隙間を除く*/
color: #333;/*文字色*/
background: none;/*背景色*/
font-size: 20vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
top: 0%;
vertical-align: middle;
margin-left:5%;
}
.slide-sumaho-ichigo-yoyaku event-text {
position: absolute!important;
margin-top: 3%!important; /*余計な隙間を除く*/
color: #333!important;/*文字色*/
background: none!important;/*背景色*/
font-size: 4vw!important;
line-height: 1.5!important;/*行高*/
padding:5px 10px!important;/*文字周りの余白*/
top: 15%!important;
margin-left:7%!important;
}
.slide-sumaho-ichigo-yoyaku event-text2 {
position: absolute!important;
margin-top: 20%!important; /*余計な隙間を除く*/
color: #C00!important;/*文字色*/
background: none!important;/*背景色*/
font-size: 2.8vw!important;
line-height: 1.5!important;/*行高*/
padding:5px 10px!important;/*文字周りの余白*/
top: 20%!important;
margin-left:7%!important;
}
.slide img {
width: 100%;
}
.br::before {
content: "\A" ;
white-space: pre ;
}
/* スライド 終わり*/
/* ★★★↑スライド-スマホ↑★★★*/
/* ★★★↓イベント-スマホ↓★★★*/
/* イベント 始め*/
.event-sumaho {/*親div*/
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.event-sumaho p1 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 5vw;
line-height: 1;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 25%;
top: 5%;
vertical-align: middle;
}
.event-sumaho p2 {
position: absolute;
margin: 0; /*余計な隙間を除く*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 4.5vw;
line-height: 4;/*行高*/
padding: 5px 10px;/*文字周りの余白*/
right: 27%;
top: 5%;
vertical-align: middle;
}
.event-sumaho event-text {
position: absolute;
margin-top: 9%; /*文章のスタート位置*/
color: black;/*文字色*/
background: none;/*背景色*/
font-size: 4vw;
line-height: 1.5;/*改行の行間*/
padding:5px 10px;/*文字周りの余白*/
right:20%;
top: 9%;
}
.event img {
width: 100%;
}
.br::before {
content: "\A" ;
white-space: pre ;
}
/* イベント 終わり*/
/* ★★★↑イベント-スマホ↑★★★*/
/* ★★★↓index ボタン↓★★★*/
.square_btn1{/**アクセス**/
display: inline-block;
padding: 0.2em 0.2em;
text-decoration: none;
background: #336699;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.square_btn1:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
.square_btn1:focus {/**クリックされた時の文字色**/
color: #FFF;
text-decoration: none;
outline: 0;
}
.square_btn2{/**Q&A**/
display: inline-block;
padding: 0.2em 0.2em;
text-decoration: none;
background: #666699;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.square_btn2:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
.square_btn2:focus {/**クリックされた時の文字色**/
color: #FFF;
text-decoration: none;
outline: 0;
}
.square_btn3{/**求人情報**/
display: inline-block;
padding: 0.2em 0.2em;
text-decoration: none;
background: #336633;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
}
.square_btn3:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
border-bottom: none;/*線を消す*/
}
.square_btn3:focus {/**クリックされた時の文字色**/
color: #FFF;
text-decoration: none;
outline: 0;
}
/** アクセス・Ｑ＆Ａ ボタン **/
@import 'https://fonts.googleapis.com/css?family=Comfortaa:300,400,700&subset=cyrillic,cyrillic-ext,latin-ext';
button-toppage {color:#454545;background:transparent;border-width:2px;border-style: solid;border-color: #454545;position:relative;margin:0.5em;display:inline-block;padding:0.2em 0.3em;transition:all 0.1s ease-in-out;text-align:center;
font-family:comfortaa;font-weight:bold;
}
button-toppage:before, button-toppage:after {content:'';display:block;position:absolute;border-color:#454545;box-sizing:border-box;border-style:solid;width:1em;height:1em;transition:all 0.3s ease-in-out;
}
button-toppage:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;
}
button-toppage:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;
}
button-toppage:hover:before, button-toppage:hover:after {width:calc(100% + 12px);
height:calc(100% + 12px);border-color:#fff;
}
button-toppage:hover {color:#6877d8;background-color:#fff;border-color:#fff;
}
.panel {max-width:300px;text-align:center;position:relative;margin:auto;
}
/** 農園ブログ **/
button-toppage2 {color:#454545;background:transparent;border-width:2px;border-style: solid;border-color: #454545;position:relative;margin:0.5em;display:inline-block;padding:0.2em 0.3em;transition:all 0.1s ease-in-out;text-align:center;
font-family:comfortaa;font-weight:bold;
}
button-toppage2:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;
}
button-toppage2:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;
}
button-toppage2:hover:before, button-toppage2:hover:after {width:calc(100% + 12px);
height:calc(100% + 12px);border-color:#fff;
}
button-toppage2:hover {color:#6877d8;background-color:#fff;border-color:#fff;
}
/** オンラインショップ ECサイト **/
button-onlineshop {
color:#ff76a0;
background:transparent;
border-width:2px;
border-style: solid;
border-color: #ff76a0;
position:relative;
margin:0.5em;
display:inline-block;
padding:1.0em 1.0em;
transition:all 0.1s ease-in-out;
text-align:center;
font-family:comfortaa;font-weight:bold;
}
button-onlineshop:before {top:-6px;left:-6px;border-width:2px 0 0 2px;z-index:5;
}
button-onlineshop:after {bottom:-6px;right:-6px;border-width:0 2px 2px 0;
}
button-onlineshop:hover:before, button-toppage2:hover:after {width:calc(100% + 12px);
height:calc(100% + 12px);border-color:#fff;
}
button-onlineshop:hover {color:#fff;background-color:#ff76a0;border-color:#ff76a0;
}
/**アクセス・Q&A・求人 ボタン**/
.btn-flat-border {
display: inline-block;
padding: 0.5em 0.9em;
text-decoration: none;
color: #ff8d45;
border: solid 2px #ff8d45;
border-radius: 3px;
transition: .4s;
margin:3px;
font-size:22px;
}
.btn-flat-border:hover {
background: #ff8d45;
color: white;
}
@media screen and (max-width: 840px) {
.btn-flat-border {
padding: 0.3em 0.6em;
border: solid 2px #ff8d45;
border-radius: 3px;
font-size:20px;
}
}
/**農園情報（ブログ）ボタン**/
.blog button-toppage2 {
color:#f26954;
border-color:#f26954;
}
.blog button-toppage2:hover {
color:#fff;
background-color:#f26954;
border-color:#f26954;
}
/** フルーツ狩りページ ボタン **/
/** いちご狩り **/
.btn-flat-strawberry {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #ff9999;
background: #FFF;
border:solid #ff9999;
transition: .4s;
/** font-size:40px;**/
}
.btn-flat-strawberry:hover {
background: #ff9999;
color: white;
}
@media screen and (max-width: 500px) {
.btn-flat-strawberry {
font-size:6vw;
}
}
/**メロン狩り **/
.btn-flat-melon {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #73c973;
background: #FFF;
border:solid #73c973;
transition: .4s;
}
.btn-flat-melon:hover {
background: #73c973;
color: white;
}
@media screen and (max-width: 500px) {
.btn-flat-melon {
font-size:6vw;
}
}
/** ぶどう狩り **/
.btn-flat-grape {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #cc6699;
background: #FFF;
border:solid #cc6699;
transition: .4s;
}
.btn-flat-grape:hover {
background: #cc6699;
color: white;
}
@media screen and (max-width: 500px) {
.btn-flat-grape {
font-size:6vw;
}
}
/** みかん狩り **/
.btn-flat-orange {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #ffcd38;
background: #FFF;
border:solid #ffcd38;
transition: .4s;
}
.btn-flat-orange:hover {
background: #ffcd38;
color: white;
}
@media screen and (max-width: 500px) {
.btn-flat-orange {
font-size:6vw;
}
}
/** 特別 果物狩り **/
.btn-flat-tokubetsu {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #f20000;
background: #FFF;
border:solid #f20000;
transition: .4s;
}
.btn-flat-tokubetsu:hover {
background: #f20000;
color: white;
}
@media screen and (max-width: 500px) {
.btn-flat-tokubetsu {
font-size:6vw;
}
}
/** 特別 果物狩り 開催終了・一時停止 **/
.btn-flat-tokubetsu-stop {
position: relative;
display: inline-block;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #443B39;
background: #FFF;
border:solid #443B39;
transition: .4s;
}
.btn-flat-tokubetsu-stop:hover {
background: #443B39;
color: white;
}
@media screen and (max-width: 500px) {
.btn-flat-tokubetsu-stop {
font-size:5vw;
}
}
/** aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa **/
/** いちご狩り **/
.btn-flat-strawberry2 {
position: relative;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #ff9999;
background: #FFF;
border:solid #ff9999;
transition: .4s;
/** font-size:40px;**/
font-size:8vw;
width:100%;
max-width:100px;
}
.btn-flat-strawberry2:hover {
background: #ff9999;
color: white;
}
/**メロン狩り **/
.btn-flat-melon2 {
position: relative;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #73c973;
background: #FFF;
border:solid #73c973;
transition: .4s;
font-size:8vw;
width:100%;
max-width:100px;
}
.btn-flat-melon2:hover {
background: #73c973;
color: white;
}
/** ぶどう狩り **/
.btn-flat-grape2 {
position: relative;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #cc6699;
background: #FFF;
border:solid #cc6699;
transition: .4s;
font-size:8vw;
width:100%;
max-width:100px;
}
.btn-flat-grape2:hover {
background: #cc6699;
color: white;
}
/** みかん狩り **/
.btn-flat-orange2 {
position: relative;
font-weight: bold;
padding: 0.55em 0.5em;
text-decoration: none;
color: #ffcd38;
background: #FFF;
border:solid #ffcd38;
transition: .4s;
font-size:8vw;
width:100%;
max-width:100px;
}
.btn-flat-orange2:hover {
background: #ffcd38;
color: white;
}
/* スマホ限定 TOP フルーツボタン */
.button123-ichigo {
position: relative;
border-radius: 4px;
color: #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: none;
transition: none;
text-shadow: 0px 1px 0px #f56778;
font-size:5vw;
font-weight:bold;
padding:10px;
}
.button123-ichigo,
.button123-ichigo:hover {
border-bottom: 4px solid #cb5462;
background-color: #f56778;
background-image: -webkit-linear-gradient(top, #f997b0, #f56778);
background-image: linear-gradient(to bottom, #f997b0, #f56778);
box-shadow: inset 1px 1px 0 #fbc1d0;
}
.button123-ichigo::before,
.button123-ichigo::after {
bottom: -1px;
left: -1px;
width: 200px;
height: 50px;
border: 1px solid #ee8090;
border-bottom: 1px solid #b84d5a;
border-radius: 4px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: none;
transition: none;
}
.button123-ichigo::before {
height: 48px;
bottom: -4px;
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 1px 1px 0px #bfbfbf;
}
.button123-ichigo:hover {
background: #f56778;
background-image: -webkit-linear-gradient(top, #f56778, #f997b0);
background-image: linear-gradient(to bottom, #f56778, #f997b0);
color: #913944;
text-shadow: 0px 1px 0px #f9a0ad;
}
.button123-ichigo:active {
bottom: -4px;
margin-bottom: 4px;
border: none;
box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.button123-ichigo:active::before,
.button123-ichigo:active::after {
border: none;
box-shadow: none;
}
.button123-melon {
position: relative;
border-radius: 4px;
color: #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: none;
transition: none;
text-shadow: 0px 1px 0px #3e6d29;
font-size:5vw;
font-weight:bold;
padding:10px;
}
.button123-melon,
.button123-melon:hover {
border-bottom: 4px solid #5ccb54;
background-color: #f56778;
background-image: -webkit-linear-gradient(top, #60da74, #369c28);
background-image: linear-gradient(to bottom, #60da74, #369c28);
box-shadow: inset 1px 1px 0 #fbc1d0;
}
.button123-melon::before,
.button123-melon::after {
bottom: -1px;
left: -1px;
width: 200px;
height: 50px;
border: 1px solid #355f1a;
border-bottom: 1px solid #b84d5a;
border-radius: 4px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: none;
transition: none;
}
.button123-melon::before {
height: 48px;
bottom: -4px;
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 1px 1px 0px #bfbfbf;
}
.button123-melon:hover {
background: #f56778;
background-image: -webkit-linear-gradient(top, #60da74, #369c28);
background-image: linear-gradient(to bottom, #60da74, #369c28);
color: #913944;
text-shadow: 0px 1px 0px #f9a0ad;
}
.button123-melon:active {
bottom: -4px;
margin-bottom: 4px;
border: none;
box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.button123-melon:active::before,
.button123-melon:active::after {
border: none;
box-shadow: none;
}
.button123-budou {
position: relative;
border-radius: 4px;
color: #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: none;
transition: none;
text-shadow: 0px 1px 0px #6d2969;
font-size:5vw;
font-weight:bold;
padding:10px;
}
.button123-budou,
.button123-budou:hover {
border-bottom: 4px solid #cb5462;
background-color: #f56778;
background-image: -webkit-linear-gradient(top, #c23fba, #e088cc);
background-image: linear-gradient(to bottom, #c23fba, #e088cc);
box-shadow: inset 1px 1px 0 #fbc1d0;
}
.button123-budou::before,
.button123-budou::after {
bottom: -1px;
left: -1px;
width: 200px;
height: 50px;
border: 1px solid #d380ee;
border-bottom: 1px solid #b84d5a;
border-radius: 4px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: none;
transition: none;
}
.button123-budou::before {
height: 48px;
bottom: -4px;
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 1px 1px 0px #bfbfbf;
}
.button123-budou:hover {
background: #e967f5;
background-image: -webkit-linear-gradient(top, #c23fba, #e088cc);
background-image: linear-gradient(to bottom, #c23fba, #e088cc);
color: #913944;
text-shadow: 0px 1px 0px #e7a0f9;
}
.button123-budou:active {
bottom: -4px;
margin-bottom: 4px;
border: none;
box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.button123-budou:active::before,
.button123-budou:active::after {
border: none;
box-shadow: none;
}
.button123-mikan {
position: relative;
border-radius: 4px;
color: #fff;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: none;
transition: none;
text-shadow: 0px 1px 0px #f59967;
font-size:5vw;
font-weight:bold;
padding:10px;
}
.button123-mikan,
.button123-mikan:hover {
border-bottom: 4px solid #cb5462;
background-color: #f56778;
background-image: -webkit-linear-gradient(top, #f59267, #f9ba97);
background-image: linear-gradient(to bottom, #f59267, #f9ba97);
box-shadow: inset 1px 1px 0 #fbc1d0;
}
.button123-mikan::before,
.button123-mikan::after {
bottom: -1px;
left: -1px;
width: 200px;
height: 50px;
border: 1px solid #ee9c80;
border-bottom: 1px solid #b88c4d;
border-radius: 4px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-transition: none;
transition: none;
}
.button123-mikan::before {
height: 48px;
bottom: -4px;
border-top: 0;
border-radius: 0 0 4px 4px;
box-shadow: 0 1px 1px 0px #bfbfbf;
}
.button123-mikan:hover {
background: #f56778;
background-image: -webkit-linear-gradient(top, #f59267, #f9ba97);
background-image: linear-gradient(to bottom, #f59267, #f9ba97);
color: #913944;
text-shadow: 0px 1px 0px #f9a0ad;
}
.button123-mikan:active {
bottom: -4px;
margin-bottom: 4px;
border: none;
box-shadow: 1px 1px 0 #fff, inset 0 1px 1px rgba(0, 0, 0, .3);
}
.button123-mikan:active::before,
.button123-mikan:active::after {
border: none;
box-shadow: none;
}
/** マウスオーバーで拡大 **/
.img_zoom{
border: none;
max-width: 400px;
margin: 0 auto;
overflow: hidden;
cursor: pointer;
padding-bottom:30px;
}
.img_zoom img{
width: 100%;
transition-duration: 0.5s;
}
.img_zoom:hover img{
transform: scale(1.1);
transition-duration: 0.5s;
}
/** マウスオーバーで拡大 全体バージョン **/
.img_zoom2{
border: none;
margin: 0 auto;
overflow: hidden;
cursor: pointer;
transition-duration: 0.5s;
}
.img_zoom2:hover{
transform: scale(1.08);
transition-duration: 0.5s;
}
/** マウスオーバーで拡大 全体バージョン **/
.img_zoom3{
overflow: hidden;
display: block;
transition-duration: 0.5s;
}
.img_zoom3:hover{
transform: scale(1.1);
transition-duration: 0.5s;
opacity: 0.6; /* 小さくするほど暗くなります */
}
/* ★★★↑index ボタン↑★★★*/
/* ★★★↓リフィール ボタン↓★★★*/
.refill_btn1 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #FF6699;
border: solid 2px #FF6699;
border-radius: 3px;
transition: .4s;
font-size:30px;
}
.refill_btn1:hover {
background: #FF6699;
color: white;
}
.refill_btn2 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #339966;
border: solid 2px #339966;
border-radius: 3px;
transition: .4s;
font-size:30px;
}
.refill_btn2:hover {
background: #339966;
color: white;
}
.refill_btn3 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #FF9933;
border: solid 2px #FF9933;
border-radius: 3px;
transition: .4s;
font-size:30px;
}
.refill_btn3:hover {
background: #FF9933;
color: white;
}
.refill_btn4 {
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
color: #3399CC;
border: solid 2px #3399CC;
border-radius: 3px;
transition: .4s;
font-size:30px;
}
.refill_btn4:hover {
background: #3399CC;
color: white;
}
/* ★★★↑リフィール ボタン↑★★★*/
/** スイーツ タイトル↓ **/
h1.sweets-title{
max-width:800px;
text-align:center;
position: relative;
padding: 1em;
border-top: solid 2px black;
border-bottom: solid 2px black;
}
h1.sweets-title:before, h1.sweets-title:after{
content: '';
position: absolute;
top: -7px;
width: 2px;
height: -webkit-calc(100% + 14px);
height: calc(100% + 14px);
background-color: black;
}
h1.sweets-title:before {
left: 7px;
}
h1.sweets-title:after {
right: 7px;
}
/** スイーツ タイトル↑ **/
/**アクセス 2カラム↓**/
*, *:before, *:after {
box-sizing: border-box;
}
.access-2columu{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
}
.access-2columu > div{
width: 100%;
padding: 10px;
}
@media screen and (max-width: 960px) {
.access-2columu > div{
width: 100%;
}
}
/**アクセス 2カラム↑**/
/**いちご狩りWEB予約**/
.square_btn_ichigo {
display: inline-block;
padding: 20px 20px;
text-decoration: none;
color: #ff7f7f;
border: solid 3px #ff7f7f;
border-radius: 3px;
transition: .4s;
font-size:5vw;
background:#FFF;
}
.square_btn_ichigo:hover {
background: #ff7f7f;
color: white;
}
/**メロン狩りWEB予約**/
.square_btn_melon {
display: inline-block;
padding: 20px 20px;
text-decoration: none;
color: #5fb875;
border: solid 3px #5fb875;
border-radius: 3px;
transition: .4s;
font-size:5vw;
background:#FFF;
}
.square_btn_melon:hover {
background: #5fb875;
color: white;
}
/**ぶどう狩り デラ WEB予約**/
.square_btn_dera {
display: inline-block;
padding: 20px 20px;
text-decoration: none;
color: #be47ea;
border: solid 3px #be47ea;
border-radius: 3px;
transition: .4s;
font-size:5vw;
background:#FFF;
}
.square_btn_dera:hover {
background: #be47ea;
color: white;
}
/**ぶどう狩り 巨峰 WEB予約**/
.square_btn_kyohou {
display: inline-block;
padding: 20px 20px;
text-decoration: none;
color: #9569ff;
border: solid 3px #9569ff;
border-radius: 3px;
transition: .4s;
font-size:5vw;
background:#FFF;
}
.square_btn_kyohou:hover {
background: #9569ff;
color: white;
}
/**もも食べ放題 WEB予約**/
.square_btn_peach {
display: inline-block;
padding: 20px 20px;
text-decoration: none;
color: #ea47ae;
border: solid 3px #ea47ae;
border-radius: 3px;
transition: .4s;
font-size:5vw;
background:#FFF;
}
.square_btn_peach:hover {
background: #ea47ae;
color: white;
}
/**梨食べ放題 WEB予約**/
.square_btn_nashi {
display: inline-block;
padding: 20px 20px;
text-decoration: none;
color: #fc7010;
border: solid 3px #fc7010;
border-radius: 3px;
transition: .4s;
font-size:7vw;
background:#FFF;
}
.square_btn_nashi:hover {
background: #fc7010;
color: white;
}
/* ==========================================================================
★ここから追加css★
========================================================================== */
.kaizyou_hamayaki{
width:100%;
max-width:420px;
background-color:white;
text-align:center;
margin:0 auto;
padding-top:10px;
padding-right:5px;
padding-left:5px;
}
.kaizyou_hamayaki p{
padding:5px;
text-align:left;
}
.kaizyou_hamayaki img{
width:100%;
max-width:400px;
padding-bottom:5px;
}
.kakitabehoudai {
width:100%;
max-width:80%;
text-align:center;
margin-left:20px;
}
.kakitabehoudai img{
width:100%;
max-width:50%;
text-align:center;
margin-left:250px;
}
.kaizyou_hamayaki-atui{
width:100%;
max-width:500px;
background-color:white;
text-align:center;
margin:0 auto;
padding-top:10px;
padding-right:5px;
padding-left:5px;
}
.kaizyou_hamayaki-atui p{
padding:5px;
text-align:left;
}
.kaizyou_hamayaki-atui img{
width:100%;
max-width:450px;
padding-bottom:5px;
}
/* ==========================================================================================================================================================================
オレパ版フルーツバナー設定 ★４つ版★
========================================================================================================================================================================== */
.mobileHidden0 { display:none;}
.mobileHidden00 { display:none;}
@media all and (max-width: 950px) {
.desktopHidden0 { display:none;}
.mobileHidden0 { display:inline;}
.mobileHidden00 { display:none;}
}
@media all and (max-width: 620px) {
.desktopHidden0 { display:none;}
.mobileHidden0 { display:none;}
.mobileHidden00 { display:inline;}
}
/* ★★★★★★ オレパ版フルーツバナー設定 ＰＣ ★★★★★★★★ */
.thumbnail11 img{
float: left;
width:25%;
padding:0 1%;
margin-left: auto;
margin-right: auto;
}
.thumbnail11_waku {
display: block;
padding-bottom:8.4vw;
margin-bottom: -2vw;
line-height: 1.428571429;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
/* フルーツバナーＰＣ マウスオーバーで拡大
※ＰＣ版のみブラウザ分け設定（ＩＥが動かない為） */
/* Edgeのみ */
@supports (-ms-ime-align:auto) {
.thumbnail11 a:hover img{
transform: scale(1.1);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu{
transform: scale(1.04,1.04) translateX(1.0vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu2{
transform: scale(1.04,1.04) translateX(0.2vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu3{
transform: scale(1.04,1.04) translateX(-0.6vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu4{
transform: scale(1.04,1.04) translateX(-1.6vw);
transition-duration: 0.5s;
}
}
/* Chromeのみ */
@media screen and (-webkit-min-device-pixel-ratio:0){
.thumbnail11 a:hover img{
transform: scale(1.1);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu{
transform: scale(1.04,1.04) translateX(1.0vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu2{
transform: scale(1.04,1.04) translateX(0.2vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu3{
transform: scale(1.04,1.04) translateX(-0.6vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu4{
transform: scale(1.04,1.04) translateX(-1.6vw);
transition-duration: 0.5s;
}
}
/* Firefoxのみ */
@-moz-document url-prefix(){
.thumbnail11 a:hover img{
transform: scale(1.1);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu{
transform: scale(1.04,1.04) translateX(1.0vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu2{
transform: scale(1.04,1.04) translateX(0.2vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu3{
transform: scale(1.04,1.04) translateX(-0.6vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu4{
transform: scale(1.04,1.04) translateX(-1.6vw);
transition-duration: 0.5s;
}
}
/* Safariのみ Chromeもできる★☆編集するならここから☆★*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.thumbnail11 a:hover img{
transform: scale(1.1);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu{
transform: scale(1.04,1.04) translateX(1.0vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu2{
transform: scale(1.04,1.04) translateX(0.2vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu3{
transform: scale(1.04,1.04) translateX(-0.6vw);
transition-duration: 0.5s;
}
.thumbnail11 a:hover .naviu4{
transform: scale(1.04,1.04) translateX(-1.6vw);
transition-duration: 0.5s;
}
}
/* IE10 */
@media all and (-ms-high-contrast:none) {
.thumbnail11 a:hover .navimozi{
transform: scale(1.03,1.03);
transition-duration: 0.5s;
}}
/* IE11 */
_:-ms-lang(x)::-ms-backdrop, body {
.thumbnail11 a:hover .navimozi{
transform: scale(1.03,1.03);
transition-duration: 0.5s;
}
}
/* ★★★★★★ オレパ版フルーツバナー設定 タブレット★★★★★★★★ */
.thumbnail2 {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.428571429;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail2 li {
width:50%;
float:left;
}
.thumbnail2 > img,
.thumbnail2 a > img {
display: block;
max-width: 80%;
height: auto;
margin-right: auto;
margin-left: auto;
}
a.thumbnail2:hover,
a.thumbnail2:focus,
a.thumbnail2.active {
border-color: #428bca;
}
.thumbnail2 .caption {
padding: 9px;
color: #333;
}
.thumbnail2 li:nth-child(3){
clear:both;
}
/* フルーツバナー タブレット マウスオーバーで拡大 */
.thumbnail2 a:hover .navimozi2{
transform: scale(1.06,1.06);
transition-duration: 0.5s;
}
/* ★★★★★★★★ オレパ版フルーツバナー設定 スマホ ★★★★★★★★ */
.thumbnail3 {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.428571429;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail3 li {
width:87%;
}
.thumbnail3 > img,
.thumbnail3 a > img {
display: block;
max-width: 70%;
height: auto;
margin-right: auto;
margin-left: auto;
}
a.thumbnail3:hover,
a.thumbnail3:focus,
a.thumbnail3.active {
border-color: #428bca;
}
.thumbnail3 .caption {
padding: 9px;
color: #333;
}
/* フルーツバナー スマホ マウスオーバーで拡大 */
.thumbnail3 a:hover .navimozi2{
transform: scale(1.06,1.06);
transition-duration: 0.5s;
}
/* ==========================================================================================================================================================================
フジパ版フルーツバナー設定 ★２つ版★
========================================================================================================================================================================== */
@media all and (max-width: 620px) {
.desktopHidden0 { display:none;}
.mobileHidden0 { display:none;}
.mobileHidden00 { display:inline;}
}
/* ★★★★★★★★ フジパ版フルーツバナー設定 ＰＣ ★★★★★★★★ */
.thumbnail1_waku {
display: block;
padding: 4px;
height:20px;
padding-top:0.5vw;
padding-bottom:8.8vw;
margin-bottom: 20px;
line-height: 1.428571429;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail1-2ko img{
display: block;
float:left;
width:80%;
}
.thumbnail1-2ko li:nth-child(1) img{
margin-left:22vw;
}
.thumbnail1-2ko li:nth-child(2) img{
margin-left:3vw;
}
/* フルーツバナー PC マウスオーバーで拡大 */
.thumbnail1-2ko a:hover .navimozi-2ko{
transform: scale(1.06,1.06);
transition-duration: 0.5s;
}
/* ★★★★★★★★ フジパ版フルーツバナー設定 スマホ ★★★★★★★★ */
.thumbnail3-2ko {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.428571429;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail3-2ko li {
width:87%;
}
.thumbnail3-2ko > img,
.thumbnail3-2ko a > img {
display: block;
max-width: 70%;
height: auto;
margin-right: auto;
margin-left: auto;
}
a.thumbnail3-2ko:hover,
a.thumbnail3-2ko:focus,
a.thumbnail3-2ko.active {
border-color: #428bca;
}
.thumbnail3-2ko .caption {
padding: 9px;
color: #333;
}
/* フルーツバナー スマホ マウスオーバーで拡大 */
.thumbnail3-2ko a:hover .navimozi2-2ko{
transform: scale(1.06,1.06);
transition-duration: 0.5s;
}
/* フジパ版フルーツバナー設定？没 */
.thumbnail2-2ko {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.428571429;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
.thumbnail2-2ko li {
width:50%;
float:left;
}
.thumbnail2-2ko > img,
.thumbnail2-2ko a > img {
display: block;
max-width: 80%;
height: auto;
margin-right: auto;
margin-left: auto;
}
a.thumbnail2-2ko:hover,
a.thumbnail2-2ko:focus,
a.thumbnail2-2ko.active {
border-color: #428bca;
}
.thumbnail2-2ko .caption {
padding: 9px;
color: #333;
}
.thumbnail2-2ko li:nth-child(3){
clear:both;
}
/* ========= 画像と文字を中央配置 ======================================================================================================================================================*/
.navimozi-2ko {/*親div*/
position: relative;/*相対配置*/
}
.navimozi-2ko p {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.5vw;
line-height: 1;/*行高は1に*/
top: 2.5vw;
left: 1.8vw;
}
.navimozi-2ko p2 {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.2vw;
line-height: 1;/*行高は1に*/
margin-top:5px;
top: 4.5vw;
left: 1.8vw;
}
.navimozi-2ko img {
width: 25%;
}
.navimozi2-2ko {/*親div*/
position: relative;/*相対配置*/
}
.navimozi2-2ko p {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.5vw;
line-height: 1;/*行高は1に*/
top: 2.5vw;
left: 1.8vw;
}
.navimozi2-2ko p2 {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.2vw;
line-height: 1;/*行高は1に*/
margin-top:5px;
top: 4.5vw;
left: 1.8vw;
}
.navimozi2-2ko img {
width: 80%;
}
.navimozi0-2ko {/*親div*/
position: relative;/*相対配置*/
}
.navimozi0-2ko p {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.5vw;
line-height: 1;/*行高は1に*/
top: 2.5vw;
left: 1.8vw;
}
.navimozi0-2ko p2 {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.2vw;
line-height: 1;/*行高は1に*/
margin-top:5px;
top: 4.5vw;
left: 1.8vw;
}
.navimozi0-2ko img {
width: 30%;
}
.mobile { display:none;}
@media all and (max-width: 750px) {
.mobile { display:inline;}
.desktop { display:none;}
}
/* ==========================================================================================================================================================================
追加（レスポンシブ）
========================================================================================================================================================================== */
.mobileHidden0 { display:none;}
.mobileHidden00 { display:none;}
.mobileHidden { display:none;}
.mobileHidden2 { display:none;}
.mobileHidden3 { display:none;}
.mobileHidden4 { display:none;}
.mobileHidden5 { display:none;}
.mobileHidden6 { display:none;}
.mobileHidden7 { display:none;}
.mobileHidden8 { display:none;}
.mobileHidden9 { display:none;}
.mobileHidden10 { display:none;}
.mobileHidden11 { display:none;}
.mobileHidden12 { display:none;}
.mobileHidden13 { display:none;}
.mobileHidden14 { display:none;}
.desktopHidden9 { display:none;}
.mobileHidden_kokuchi { display:none;}
.mobileHidden_kokuchi2 { display:none;}
.mobileHidden_kokuchi_event { display:none;}
.mobileHidden_kokuchi2_event { display:none;}
.mobileHidden_kokuchi_fruit { display:none;}
.mobileHidden_kokuchi2_fruit { display:none;}
.mobileHidden_kokuchi_fruit2 { display:none;}
.mobileHidden_kokuchi2_fruit2 { display:none;}
@media all and (max-width: 950px) {
.desktopHidden0 { display:none;}
.mobileHidden0 { display:inline;}
.mobileHidden00 { display:none;}
.desktopHidden3 { display:none;}
.mobileHidden5 { display:inline;}
}
@media screen and (max-width: 1200px) {
.desktopHidden { display:none;}
.mobileHidden { display:inline;}
.mobileHidden2 { display:inline;}
.mobileHidden3 { display:none;}
}
@media all and (max-width: 600px) {
.desktopHidden2 { display:none;}
.mobileHidden4 { display:inline;}
}
@media all and (max-width: 598px) {
.desktopHidden4 { display:none;}
.mobileHidden6 { display:inline;}
}
@media all and (max-width: 1160px) {
.desktopHidden5 { display:none;}
.mobileHidden7 { display:inline;}
}
@media all and (max-width: 1450px) {
.desktopHidden8 { display:none;}
.desktopHidden9 { display:inline;}
}
@media all and (max-width: 870px) {
.desktopHidden11 { display:none;}
.mobileHidden11 { display:inline;}
}
@media all and (max-width: 980px) {
.desktopHidden13 { display:none;}
.mobileHidden13 { display:inline;}
}
@media screen and (max-width: 350px) {
.desktopHidden10 { display:none;}
.mobileHidden10 { display:inline;}
}
@media screen and (max-width: 500px) {
.desktopHidden14 { display:none;}
.mobileHidden14 { display:inline;}
}
/* 3パターン */
@media all and (max-width: 620px) {
.desktopHidden0 { display:none;}
.mobileHidden0 { display:none;}
.mobileHidden00 { display:inline;}
}
/* 3パターン */
@media all and (max-width: 900px) {
.desktopHidden7 { display:none;}
.mobileHidden9 { display:inline;}
.desktopHidden9 { display:none;}
}
/* 3パターン */
@media all and (max-width: 570px) {
.desktopHidden { display:none;}
.mobileHidden3 { display:inline;}
.mobileHidden2 { display:none;}
}
/* 3パターン★ */
@media screen and (max-width: 1070px) {
.desktopHidden_kokuchi { display:none;}
.mobileHidden_kokuchi { display:inline;}
.mobileHidden_kokuchi2 { display:none;}
}
/* 3パターン★ */
@media screen and (max-width: 810px) {
.desktopHidden_kokuchi { display:none;}
.mobileHidden_kokuchi { display:none;}
.mobileHidden_kokuchi2 { display:inline;}
}
/* 3パターン２◯ */
@media screen and (max-width: 1350px) {
.desktopHidden_kokuchi_event { display:none;}
.mobileHidden_kokuchi_event { display:inline;}
.mobileHidden_kokuchi2_event { display:none;}
}
/* 3パターン３● */
@media screen and (max-width: 1210px) {
.desktopHidden_kokuchi_fruit { display:none;}
.mobileHidden_kokuchi_fruit { display:inline;}
.mobileHidden_kokuchi2_fruit { display:none;}
}
/* 3パターン３●*/
@media screen and (max-width: 810px) {
.desktopHidden_kokuchi_fruit { display:none;}
.mobileHidden_kokuchi_fruit { display:none;}
.mobileHidden_kokuchi2_fruit { display:inline;}
}
/* float解除 */
.kaizyo{
clear:both;
}
/*ページ上に戻る*/
.pagetop2{
text-align:center;
text-decoration:underline;
font-weight:bold;
}
/* ==========================================================================================================================================================================
終わり（レスポンシブ）
========================================================================================================================================================================== */
#google_translate_element {
text-align: center;
z-index: 9999;
}
#google_translate_element img {
display: inline;
z-index: 9999;
}
/* ==========================================================================================================================================================================
文字にマウスオーバーすると背景色表示 ピンク
========================================================================================================================================================================== */
.mozi-link a {
padding: 0 .3em;
transition: all .3s;
}
.mozi-link a:hover {
color: white;
background-color: #ff7bb1;
}
.mozi-link4 a {
padding: 10px;
transition: all .3s;
}
.mozi-link4 a:hover {
color: white;
background-color: #ff7bb1;
}
/* ==========================================================================================================================================================================
文字にマウスオーバーすると背景色表示 メロン
========================================================================================================================================================================== */
.mozi-link2 a {
padding: 0 .3em;
transition: all .3s;
}
.mozi-link2 a:hover {
color: white;
background-color: #88eab8;
}
/* ==========================================================================================================================================================================
文字にマウスオーバーすると背景色表示 みかん
========================================================================================================================================================================== */
.mozi-link3 a {
padding: 10px;
transition: all .3s;
}
.mozi-link3 a:hover {
color: white;
background-color: #ff6927;
}
/* ==========================================================================================================================================================================
sweetsページのスイーツ部分のナビ設定 特別
========================================================================================================================================================================== */
.global-title0 {
background:#4379ff;
padding:5px;
color:#FFF;
padding:5px;
margin-bottom:10px;
font-weight:bold;
margin-top:5px;
}
.global-nav0 {
margin: 0px 0px 30px;
padding: 0;
font-size: 15px;
list-style-type: none;
max-width:800px;
font-weight:bold;
background: #e9f8ff;
box-shadow: 0px 0px 0px 10px #e9f2ff;/*線の外側*/
border:2px solid #1111ba;
border-radius:5px;
width:90%;
}
/*clearfix*/
.global-nav0:after {
content: "";
clear: both;
display: block;
}
.global-nav0 li {
float: left;
width: 50%;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size:15px;
line-height: 1.5;
padding: 0.5em 0;
}
/*リンク前色*/
.global-nav0 li:nth-child(1){
background: #cae7ff;
}
.global-nav0 li:nth-child(2){
background: #cae7ff;
}
.global-nav0 li:nth-child(3){
background: #eeffff;
}
.global-nav0 li:nth-child(4){
background: #eeffff;
}
.global-nav0 li:nth-child(5){
background: #cae7ff;
}
.global-nav0 li:nth-child(6){
background: #cae7ff;
}
.global-nav0 li:nth-child(7){
background: #eeffff;
}
.global-nav0 li:nth-child(8){
background: #eeffff;
}
.global-nav0 li:nth-child(9){
background: #cae7ff;
}
.global-nav0 li:nth-child(10){
background: #cae7ff;
}
/*奇数のli要素に適応*/
.global-nav0 li:nth-child(odd) {
}
.global-nav0 a {
display: block;
line-height: 44px;
text-decoration: none;
color:#001699;/*文字色*/
}
/*リンク後色*/
.global-nav0 li:nth-child(1) a:hover {
background: #4f9eed;
}
.global-nav0 li:nth-child(2) a:hover {
background: #4f9eed;
}
.global-nav0 li:nth-child(3) a:hover {
background: #a9d6ff;
}
.global-nav0 li:nth-child(4) a:hover {
background: #a9d6ff;
}
.global-nav0 li:nth-child(5) a:hover {
background: #4f9eed;
}
.global-nav0 li:nth-child(6) a:hover {
background: #4f9eed;
}
.global-nav0 li:nth-child(7) a:hover {
background: #a9d6ff;
}
.global-nav0 li:nth-child(8) a:hover {
background: #a9d6ff;
}
.global-nav0 li:nth-child(9) a:hover {
background: #4f9eed;
}
.global-nav0 li:nth-child(10) a:hover {
background: #4f9eed;
}
.global-nav0 a:hover {
color:#FFF;/*リンク後色*/
}
.global-nav0 li:nth-child(odd) {
border-right: dashed 2px #fff;/*真ん中の仕切りの破線 点線*/
}
/* ==========================================================================================================================================================================
sweetsページのスイーツ部分のナビ設定 野外BBQ
========================================================================================================================================================================== */
.global-yagai{
max-width: 300px;
margin: 0 auto;
}
a.global-yagai-link {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
box-sizing: border-box;
background: repeating-linear-gradient(45deg, #ffffff, #ffffff 3px, #ffe3a6 3px, #ffe3a6 30px);
color: #0d1e2d;
font-weight:bold;
letter-spacing: 0.1em;
text-decoration: none;
position: relative;
}
a.global-yagai-link span {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
background: #fffc8d;
border: 2px solid #000;
box-sizing: border-box;
position: absolute;
top: -6px;
left: -6px;
transition-duration: 0.2s;
}
a.global-yagai-link:hover span {
left: -1px;
top: -1px;
color: #0d1e2d;
}
/* ==========================================================================================================================================================================
sweetsページのスイーツ部分のナビ設定 いちご
========================================================================================================================================================================== */
.global-title {
background:#ff3ea3;
padding:5px;
color:#FFF;
padding:5px;
margin-bottom:10px;
font-weight:bold;
margin-top:5px;
}
.global-nav {
margin: 0px 0px 30px;
padding: 0;
font-size: 15px;
list-style-type: none;
max-width:800px;
font-weight:bold;
background: #ffe3f7;
box-shadow: 0px 0px 0px 10px #ffe3f7;/*線の外側*/
border:2px solid #ff3ea3;
border-radius:5px;
width:90%;
}
/*clearfix*/
.global-nav:after {
content: "";
clear: both;
display: block;
}
.global-nav li {
float: left;
width: 50%;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size:15px;
line-height: 1.5;
padding: 0.5em 0;
}
/*リンク前色*/
.global-nav li:nth-child(1){
background: #ffc5da;
}
.global-nav li:nth-child(2){
background: #ffc5da;
}
.global-nav li:nth-child(3){
background: #ffe9f1;
}
.global-nav li:nth-child(4){
background: #ffe9f1;
}
.global-nav li:nth-child(5){
background: #ffc5da;
}
.global-nav li:nth-child(6){
background: #ffc5da;
}
.global-nav li:nth-child(7){
background: #ffe9f1;
}
.global-nav li:nth-child(8){
background: #ffe9f1;
}
.global-nav li:nth-child(9){
background: #ffc5da;
}
.global-nav li:nth-child(10){
background: #ffc5da;
}
/*奇数のli要素に適応*/
.global-nav li:nth-child(odd) {
}
.global-nav a {
display: block;
line-height: 44px;
text-decoration: none;
color:#9b0000;/*文字色*/
}
/*リンク後色*/
.global-nav li:nth-child(1) a:hover {
background: #ff33a8;
}
.global-nav li:nth-child(2) a:hover {
background: #ff33a8;
}
.global-nav li:nth-child(3) a:hover {
background: #ffa6b3;
}
.global-nav li:nth-child(4) a:hover {
background: #ffa6b3;
}
.global-nav li:nth-child(5) a:hover {
background: #ff33a8;
}
.global-nav li:nth-child(6) a:hover {
background: #ff33a8;
}
.global-nav li:nth-child(7) a:hover {
background: #ffa6b3;
}
.global-nav li:nth-child(8) a:hover {
background: #ffa6b3;
}
.global-nav li:nth-child(9) a:hover {
background: #ff33a8;
}
.global-nav li:nth-child(10) a:hover {
background: #ff33a8;
}
.global-nav a:hover {
color:#FFF;/*リンク後色*/
}
.global-nav li:nth-child(odd) {
border-right: dashed 2px #fff;/*真ん中の仕切りの破線 点線*/
}
/* ==========================================================================================================================================================================
sweetsページのスイーツ部分のナビ設定 メロン
========================================================================================================================================================================== */
.global-title2 {
background:#21ce25;
padding:5px;
color:#FFF;
padding:5px;
margin-bottom:10px;
font-weight:bold;
margin-top:5px;
}
.global-nav2 {
margin: 0px 0px 30px;
padding: 0;
font-size: 15px;
list-style-type: none;
max-width:800px;
font-weight:bold;
background: #f3ffe9;
box-shadow: 0px 0px 0px 10px #f3ffe9;/*線の外側*/
border:2px solid #188c1b;
border-radius:5px;
width:90%;
}
/*clearfix*/
.global-nav2:after {
content: "";
clear: both;
display: block;
}
.global-nav2 li {
float: left;
width: 50%;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size:15px;
line-height: 1.5;
padding: 0.5em 0;
}
/*リンク前色*/
.global-nav2 li:nth-child(1){
background: #d6f7aa;
}
.global-nav2 li:nth-child(2){
background: #d6f7aa;
}
.global-nav2 li:nth-child(3){
background: #cffffa;
}
.global-nav2 li:nth-child(4){
background: #cffffa;
}
.global-nav2 li:nth-child(5){
background: #d6f7aa;
}
.global-nav2 li:nth-child(6){
background: #d6f7aa;
}
.global-nav2 li:nth-child(7){
background: #cffffa;
}
.global-nav2 li:nth-child(8){
background: #cffffa;
}
.global-nav2 li:nth-child(9){
background: #d6f7aa;
}
.global-nav2 li:nth-child(10){
background: #d6f7aa;
}
/*奇数のli要素に適応*/
.global-nav2 li:nth-child(odd) {
}
.global-nav2 a {
display: block;
line-height: 44px;
text-decoration: none;
color:#097500;/*文字色*/
}
/*リンク後色*/
.global-nav2 li:nth-child(1) a:hover {
background: #69c7c9;
}
.global-nav2 li:nth-child(2) a:hover {
background: #69c7c9;
}
.global-nav2 li:nth-child(3) a:hover {
background: #11c16d;
}
.global-nav2 li:nth-child(4) a:hover {
background: #11c16d;
}
.global-nav2 li:nth-child(5) a:hover {
background: #69c7c9;
}
.global-nav2 li:nth-child(6) a:hover {
background: #69c7c9;
}
.global-nav2 li:nth-child(7) a:hover {
background: #11c16d;
}
.global-nav2 li:nth-child(8) a:hover {
background: #11c16d;
}
.global-nav2 li:nth-child(9) a:hover {
background: #69c7c9;
}
.global-nav2 li:nth-child(10) a:hover {
background: #69c7c9;
}
.global-nav2 a:hover {
color:#FFF;/*リンク後色*/
}
.global-nav2 li:nth-child(odd) {
border-right: dashed 2px #fff;/*真ん中の仕切りの破線 点線*/
}
/* ==========================================================================================================================================================================
sweetsページのスイーツ部分のナビ設定 みかん
========================================================================================================================================================================== */
.global-title3 {
background:#ff903e;
padding:5px;
color:#FFF;
padding:5px;
margin-bottom:10px;
font-weight:bold;
margin-top:5px;
}
.global-nav3 {
margin: 0px 0px 30px;
padding: 0;
font-size: 15px;
list-style-type: none;
max-width:800px;
font-weight:bold;
background: #fff3e9;
box-shadow: 0px 0px 0px 10px #fff3e9;/*線の外側*/
border:2px solid #ff903e;
border-radius:5px;
width:90%;
}
/*clearfix*/
.global-nav3:after {
content: "";
clear: both;
display: block;
}
.global-nav3 li {
float: left;
width: 50%;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size:15px;
line-height: 1.5;
padding: 0.5em 0;
}
/*リンク前色*/
.global-nav3 li:nth-child(1){
background: #f7d8aa;
}
.global-nav3 li:nth-child(2){
background: #f7d8aa;
}
.global-nav3 li:nth-child(3){
background: #fff0cf;
}
.global-nav3 li:nth-child(4){
background: #fff0cf;
}
.global-nav3 li:nth-child(5){
background: #f7d8aa;
}
.global-nav3 li:nth-child(6){
background: #f7d8aa;
}
.global-nav3 li:nth-child(7){
background: #fff0cf;
}
.global-nav3 li:nth-child(8){
background: #fff0cf;
}
.global-nav3 li:nth-child(9){
background: #f7d8aa;
}
.global-nav3 li:nth-child(10){
background: #f7d8aa;
}
/*奇数のli要素に適応*/
.global-nav3 li:nth-child(odd) {
}
.global-nav3 a {
display: block;
line-height: 44px;
text-decoration: none;
color:#753c00;/*文字色*/
}
/*リンク後色*/
.global-nav3 li:nth-child(1) a:hover {
background: #c98e69;
}
.global-nav3 li:nth-child(2) a:hover {
background: #c98e69;
}
.global-nav3 li:nth-child(3) a:hover {
background: #cf7023;
}
.global-nav3 li:nth-child(4) a:hover {
background: #cf7023;
}
.global-nav3 li:nth-child(5) a:hover {
background: #c98e69;
}
.global-nav3 li:nth-child(6) a:hover {
background: #c98e69;
}
.global-nav3 li:nth-child(7) a:hover {
background: #cf7023;
}
.global-nav3 li:nth-child(8) a:hover {
background: #cf7023;
}
.global-nav3 li:nth-child(9) a:hover {
background: #c98e69;
}
.global-nav3 li:nth-child(10) a:hover {
background: #c98e69;
}
.global-nav3 a:hover {
color:#FFF;/*リンク後色*/
}
.global-nav3 li:nth-child(odd) {
border-right: dashed 2px #fff;/*真ん中の仕切りの破線 点線*/
}
/* ==========================================================================================================================================================================
sweetsページのスイーツ部分のナビ設定 ぶどう
========================================================================================================================================================================== */
.global-title4 {
background:#b440ff;
padding:5px;
color:#FFF;
padding:5px;
margin-bottom:10px;
font-weight:bold;
margin-top:5px;
}
.global-nav4 {
margin: 0px 0px 30px;
padding: 0;
font-size: 15px;
list-style-type: none;
max-width:800px;
font-weight:bold;
background: #f3e6ff;
box-shadow: 0px 0px 0px 10px #f3e6ff;/*線の外側*/
border:2px solid #bc0f9c;
border-radius:5px;
width:90%;
}
/*clearfix*/
.global-nav4:after {
content: "";
clear: both;
display: block;
}
.global-nav4 li {
float: left;
width: 50%;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size:15px;
line-height: 1.5;
padding: 0.5em 0;
}
/*リンク前色*/
.global-nav4 li:nth-child(1){
background: #d2c7ff;
}
.global-nav4 li:nth-child(2){
background: #d2c7ff;
}
.global-nav4 li:nth-child(3){
background: #ffebff;
}
.global-nav4 li:nth-child(4){
background: #ffebff;
}
.global-nav4 li:nth-child(5){
background: #d2c7ff;
}
.global-nav4 li:nth-child(6){
background: #d2c7ff;
}
.global-nav4 li:nth-child(7){
background: #ffebff;
}
.global-nav4 li:nth-child(8){
background: #ffebff;
}
.global-nav4 li:nth-child(9){
background: #d2c7ff;
}
.global-nav4 li:nth-child(10){
background: #d2c7ff;
}
/*奇数のli要素に適応*/
.global-nav4 li:nth-child(odd) {
}
.global-nav4 a {
display: block;
line-height: 44px;
text-decoration: none;
color:#680099;/*文字色*/
}
/*リンク後色*/
.global-nav4 li:nth-child(1) a:hover {
background: #bb4def;
}
.global-nav4 li:nth-child(2) a:hover {
background: #bb4def;
}
.global-nav4 li:nth-child(3) a:hover {
background: #a6abff;
}
.global-nav4 li:nth-child(4) a:hover {
background: #a6abff;
}
.global-nav4 li:nth-child(5) a:hover {
background: #bb4def;
}
.global-nav4 li:nth-child(6) a:hover {
background: #bb4def;
}
.global-nav4 li:nth-child(7) a:hover {
background: #a6abff;
}
.global-nav4 li:nth-child(8) a:hover {
background: #a6abff;
}
.global-nav4 li:nth-child(9) a:hover {
background: #bb4def;
}
.global-nav4 li:nth-child(10) a:hover {
background: #bb4def;
}
.global-nav4 a:hover {
color:#FFF;/*リンク後色*/
}
.global-nav4 li:nth-child(odd) {
border-right: dashed 2px #fff;/*真ん中の仕切りの破線 点線*/
}
/* ==========================================================================================================================================================================
↓↓告知画像＋文字設定
========================================================================================================================================================================== */
/* 没↓ */
.mini-kokuti {
position: relative;/*相対配置*/
display:table-cell;
vertical-align:middle;
}
.mini-kokuti img {
width: 100%;
max-width: 800px;
}
.kokuti-text {
position: absolute;
line-height: 5;/*行高*/ top:2px;
left: 0px;
color: #fff;
background: rgba(0,0,0,.6);
width: 100%;
max-width: 800px;
padding: 1em 0;
}
.kokuti-text p {
line-height: 1.5;/*行高*/ margin: 0;
padding: 0 0.8em;
font-size: 150%;
text-align: center;
}
/* 没↑ */
/* ========= 画像と文字を中央配置 ======================================================================================================================================================*/
.main_conatent{
position: relative;/*相対配置*/
width: 100%;
max-width: 800px;
height: auto;
margin: 0 auto;
padding: 0;
text-align:center;
}
.main_conatent img{
width: 100%;
}
.hover_text{
margin:0 auto;
width:600px;
position: absolute;
top: 10px;
left: 3px;
text-align:center;
font-size:30px;
font-weight:bold;
}
.main_text_bi{
color: #1E1E1E;
font-weight: bold;
font-size: 32px;
margin: 0;
padding: 0;
}
.sub_text_sm{
color: #1E1E1E;
font-weight: 100;
font-size: 20px;
margin: 0;
padding: 0;
}
/* ========= 画像と文字を中央配置 ======================================================================================================================================================*/
.navimozi {/*親div*/
position: relative;/*相対配置*/
}
.navimozi p {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.5vw;
line-height: 1;/*行高は1に*/
top: 2.5vw;
left: 1.8vw;
}
.navimozi p2 {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.2vw;
line-height: 1;/*行高は1に*/
margin-top:5px;
top: 4.5vw;
left: 1.8vw;
}
.navimozi img {
width: 25%;
}
.navimozi2 {/*親div*/
position: relative;/*相対配置*/
}
.navimozi2 p {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.5vw;
line-height: 1;/*行高は1に*/
top: 2.5vw;
left: 1.8vw;
}
.navimozi2 p2 {
position: absolute;/*絶対配置*/
color: white;/*文字は白に*/
font-weight:bold;
font-size: 1.2vw;
line-height: 1;/*行高は1に*/
margin-top:5px;
top: 4.5vw;
left: 1.8vw;
}
.navimozi2 img {
width: 80%;
}
/* ==========================================================================================================================================================================
↓↓ミニ告知（文字＋画像）テンプレ
========================================================================================================================================================================== */
@media only screen and (max-width:961px) { /* 大画面用 */
.mini-kokuti {
font-size: 26px;
}
.kokuti-text {
font-size: 17px;
}
}
@media only screen and (max-width:651px) { /* 中画面用 */
.mini-kokuti {
font-size: 15px;
}
.kokuti-text {
font-size: 12px;
}
}
/* ==========================================================================================================================================================================
↓↓果物狩りページのフルーツ狩りカレンダー修正
========================================================================================================================================================================== */
.yoyaku2 table{
margin-bottom:30px;
}
.fruit-contents1-2-2 .yoyaku2{
width:40%;
display:inline-block;
vertical-align:top;
margin:2%;
letter-spacing:0em;
}
.fruit-contents1-2-2:nth-child(2n) {
margin-right:0%;
}
@media only screen and (max-width:961px) { /* 中画面用 */
.yoyaku2 table{
margin-bottom:0px;
}
.fruit-contents1-2-2 .yoyaku2{
width:65%;
padding-top:0px;
margin-bottom:0px;
margin-left: auto;
margin-right: auto;
}
.fruit-contents1-2-2:nth-child(2n) {
margin-top:-40px;
margin-right:0%;
}
}
@media only screen and (max-width:561px) { /* 小画面用 */
.yoyaku2 table{
margin-bottom:0px;
}
.fruit-contents1-2-2 .yoyaku2{
width:100%;
padding-top:0px;
margin-bottom:0px;
margin-left: auto;
margin-right: auto;
}
.fruit-contents1-2-2:nth-child(2n) {
margin-top:-40px;
margin-right:0%;
}
}
/* ==========================================================================================================================================================================
↓↓囲いcssまとめ
========================================================================================================================================================================== */
.kakoi-pink{
color: #fff;
padding: 20px;
background: #b2946c;
position: relative;
z-index: 10;
}
.kakoi-pink:before{
content: "";
position: absolute;
background: #b2946c;
margin: 4px;
border: 2px #fff solid;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
z-index: -10;
}
.kakoi-pink2{
color: #fff;
padding: 20px;
background: #87a56f;
position: relative;
z-index: 10;
}
.kakoi-pink2:before{
content: "";
position: absolute;
background: #87a56f;
margin: 4px;
border: 2px #fff solid;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: block;
z-index: -10;
}
.kakoi-2dan {
background: #FFD7E9;
}
.kakoi-2dan .kakoi-title {
font-size: 1.2em;
background: #FF99C3;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.kakoi-2dan p {
padding: 15px 20px;
margin: 0;
}
.kakoi-2sen{
padding: 0.5em 1em;
margin: 2em 0;
color: #00BCD4;
background: #e4fcff;/*背景色*/
border-top: solid 6px #1dc1d6;
-webkit-border-bottom-right-radius: 30px;
-webkit-border-bottom-left-radius: 30px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
}
.kakoi-2sen p {
margin: 0;
padding: 0;
}
.kakoi-2sen h1 {
margin: 0;
padding: 0;
}
.maru-kakoi {
/* サイズ指定 */
width:175px;
height:175px;
/* 背景色 */
background-color:#A34EA8;
/* 角を丸くする */
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);/*影*/
margin-top:10px;
}
.maru-mozi {
padding-top:38px; /* 真ん中にまで文字を下ろす */
}
.maru-mozi h1,
.maru-mozi p {
text-align: center; /* 中央寄せ */
color: #fff; /* 文字を白色に */
margin: 0; /* h1とpの余白をリセット */
}
/* あとは文字サイズや太字を指定 */
.maru-mozi h1 {font-size:20px; font-weight:bold;}
.maru-mozi p {font-size:22px; font-weight:bold;}
/* 吹き出し本体 */
.fukidashi {
position: relative;
display: inline-block;
margin: 0 5px;
padding: 15px 10px;
vertical-align: top;
border-style: solid;
border-width: 1px;
border-color: #cccccc; /* 枠線の色 */
border-radius: 10px; /* 四隅の丸み */
background-color: #fffff0; /* 内側の背景色 */
box-shadow: 2px 2px 4px #e0e0e0; /* 影 */
margin-bottom: 15px; /* ツノの突き出し量 */
}
.fukidashi:before {
position: absolute;
content: "";
width: 0;
height: 0;
top: 100%;
border-style: solid;
border-color: transparent;
border-top-color: #cccccc; /* 枠線の色 */
border-width: 15px; /* ツノの突き出し量 */
left: 30px; /* ツノの位置（左から） */
}
.fukidashi:after {
position: absolute;
content: "";
width: 0;
height: 0;
top: 100%;
border-style: solid;
border-color: transparent;
border-top-color: #fffff0; /* 内側の背景色 */
border-width: 14px; /* ツノの突き出し量－１ */
left: 31px; /* ツノの位置＋１（左から） */
}
/* 緑枠線 */
.kakoi-kami {
max-width:700px;
text-align:center;
color: #fff;
background: #47a89c;
padding: 20px;
border: 2px dashed rgba(255,255,255,0.5);
border-radius: 6px;
box-shadow: 0 0 0 5px #47a89c, 0 2px 3px 5px rgba(0,0,0,0.5);
}
/* ピンク枠線 */
.kakoi-kami2 {
max-width:700px;
text-align:center;
color: #fff;
background: #ff7bb7;
padding: 20px;
border: 2px dashed rgba(255,255,255,0.5);
border-radius: 6px;
box-shadow: 0 0 0 5px #ff7bb7, 0 2px 3px 5px rgba(0,0,0,0.5);
}
.midashi-title {
position: relative;
padding: 0.5em 1.2em;
border-radius:0.6em;
border: 1px solid #CCC;
text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
box-shadow:inset 1px 1px 0 rgba(255,255,255,1);
background: linear-gradient(#EFEFEF 0%, #FFF 50%, #EEE 50%, #FFF 100%);
margin-bottom:5px;
}
.midashi-tensen {
border-top: 2px dotted #ffcc00;
border-bottom: 2px dotted #ffcc00;
text-align: left;
color: #000;
background-color: #fff;
font-size: 14px;
padding: 4px 4px 4px 5px;
max-width: 400px;
margin-bottom:5px;
margin-top:5px;
}
.midashi-tensen span.s7 {
display:block;
border-left: solid 8px #ffcc00;
padding-left:10px;
}
/* スマート 囲み枠 2 */
.kakomi-smart2 {
position: relative;
margin: 2em auto;
padding: 3em 1em .8em;
width: 90%; /* ボックス幅 */
border-style: solid;
border-width: 5px 0 0 0;
border-color: #907b6e; /* 枠の色 */
background-color: #ede4cd; /* 背景色 */
color: #666; /* テキスト色 */
box-shadow: 0 0 3px #999; /* 影の色 */
}
.title-smart2{
position: absolute;
top: 8px;
left: 15px;
background-color: #ede4cd; /* タイトル背景色 */
color: #907b6e; /* タイトル色 */
font-size: 1.1em;
font-weight: bold;
border-style: none none double;
border-color: #907b6e; /*タイトル下線 */
border-width: 3px;
}
/* テープ付 枠 */
.kakomi-tape {
position:relative;
padding: 35px 20px 20px;
margin: 2.5em auto;
width: 90%;
color: #555555; /* 文字色 */
background-color: #e0ebaf; /*BOX背景色*/
box-shadow: 0 2px 5px #999;
z-index: 1;
}
.title-tape {
position: absolute;
top: -15px;
left: 30px;
padding: 4px 20px;
color: #555555; /*タイトル色*/
font-weight: bold;
background-color: rgba(255,255,255,.1);
border-left: 2px dotted rgba(0,0,0,.1);
border-right: 2px dotted rgba(0,0,0,.1);
box-shadow: 0 0 5px rgba(0,0,0,0.2);
transform: rotate(-3deg);
}
.simple-kakoi {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #95ccff;
border-radius: 8px;
}
.simple-kakoi .simple-kakoi-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 19px;
background: #FFF;
color: #95ccff;
font-weight: bold;
}
.simple-kakoi p {
margin: 0;
padding: 0;
}
/* リンク文字 クリアなオレンジ枠 */
.square_btn4 {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #fd9535;/*色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #d27d00;/*線色*/
}
.square_btn4:hover {
background: #ffb77b;
}
.square_btn4:active {/*押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
}
/* 外国人誘導（facebook）のボタン */
.box30 {
margin: 2em 0;
background: #f1f1f1;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box30 .box-title {
font-size: 1.2em;
background: #5fc2f5;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box30 p {
padding: 15px 20px;
margin: 0;
}
.btnnn {
display: block;
cursor: pointer;
max-width: 300px;
border-radius: 4px;
box-sizing: border-box;
color: #fff;
text-align: center;
text-decoration: inherit;
background: #5A57A0;
box-shadow: 0 6px 0 #1e39a8, 0 12px 0 rgba(0,0,0,.2);
transition: color .3s, background .3s, box-shadow .3s, transform .3s;
}
.btnnn:hover {
box-shadow: 0 3px 0 #4f94e0, 0 6px 0 rgba(0,0,0,.2);
transform: translateY(3px);
animation: flash 1s both;
}
.btnnn:active {
color: #ddd;
background: #12978d;
box-shadow: 0 0 0 #1e39a8, 0 0 0 rgba(0,0,0,.2);
transform: translateY(6px);
transition-duration: .1s;
}
@keyframes flash {
0% { background: #5A57A0; }
10% { background: #96e9e6; }
100% { background: #5A57A0; }
}
/* 吹き出し→右 */
.balloon1-right {
position: relative;
display: inline-block;
margin: 1.5em 15px 1.5em 0;
padding: 7px 20px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #c7eab7;
border-radius: 24px;
}
.balloon1-right:before {
content: "";
position: absolute;
top: 50%;
left: 100%;
margin-top: -15px;
border: 15px solid transparent;
border-left: 15px solid #c7eab7;
}
.balloon1-right p {
margin: 0;
padding: 0;
}
/* 吹き出し↓下 */
.balloon1-sita {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #c7eab7;
border-radius: 24px;
}
.balloon1-sita:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #c7eab7;
}
.balloon1-sita p {
margin: 0;
padding: 0;
}
/* 動くボタンのCSS */
.btn-animation-02 {
display: inline-block;
width: 200px;
text-align: center;
background-color: #9ec34b;
border: 2px solid #9ec34b;
font-size: 16px;
color: #9ec34b;
text-decoration: none;
font-weight: bold;
padding: 10px 24px;
border-radius: 4px;
position: relative;
}
.btn-animation-02 span {
position: relative;
z-index: 1;
}
.btn-animation-02::before,
.btn-animation-02::after {
content: "";
display: block;
background-color: #FFF;
width: 50%;
height: 100%;
position: absolute;
top: 0;
transition: .2s;
}
.btn-animation-02::before {
left: 0;
}
.btn-animation-02::after {
right: 0;
}
.btn-animation-02:hover:before,
.btn-animation-02:hover:after {
width: 0;
background-color: #FFF;
}
.btn-animation-02:hover {
color: #FFF;
}
.box004{
color: #2c2c2f;
background: #edffa1;
border: solid 5px #62cc79;
border-radius:10px;
}
.box004 p {
margin: 0;
padding: 0;
}
/* ==========================================================================================================================================================================
↓↓ 特集商品ご紹介
========================================================================================================================================================================== */
.tokusyuu{
width:100%;
max-width:1030px;
margin:0 auto;
background-color:#FFF;
padding:10px
}
.tokusyuu_box{
max-width:1030px;
margin-bottom:10px;
}
.tokusyuu_box2{
width:1030px;
}
.tokusyuu h5{
padding: 0 5px;
border-bottom:3px dotted #FF9100;
border-left:10px solid #FF9100;
font-weight:bold;
margin-bottom:5px;
}
.tokusyuu h5:first-letter{
font-size:2em;
color:#FF9100;
font-weight:bold;
}
.tokusyuu_text{
float: left;
width:435px;
padding-top:10px;
padding-left:5px;
margin-right:10px;
margin-left:10px;
}
.tokusyuu_img{
float: left;
max-width:550px;
margin-top:5px;
}
.tokusyuu_img2{
text-align:center;
}
.tokusyuu_img2 img{
margin-right:10px;
}
.mobileHidden_tokusyuu { display:none;}
@media screen and (max-width: 1065px) {
.desktopHidden_tokusyuu { display:none;}
.mobileHidden_tokusyuu { display:inline;}
}
/* ==========================================================================================================================================================================
↓↓floatの縦並び3種css
========================================================================================================================================================================== */
.event-tate{
width:100%;
max-width:950px;
background-color:#FFF;
padding-top:10px;
padding-bottom:10px;
margin-top:30px;
margin-bottom:30px;
}
.hidari-text{
width:100%;
max-width:500px;
float:left;
padding-left:10px;
margin-right:10px;
}
.img-tate{
width:100%;
max-width:500px;
float:left;
padding-left:10px;
margin-right:10px;
}
.img-tate img{
width:100%;
max-width:500px;
}
.text-tate{
width:100%;
max-width:420px;
float:left;
text-align:left;
padding-left:10px;
}
.text-tate p{
line-height:1.5;
margin-bottom:2px;
margin-top:2px;
}
/* ==========================================================================================================================================================================
↓↓電話ボタンのスマホ版css
========================================================================================================================================================================== */
/* 応用可能 押しボタン */
/* オレンジ */
.square_btn_orange{
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background: #668ad8;
color: #FFF;
/* border-bottom: solid 4px #627295;
border-radius: 3px; */
border-radius:10px;
text-shadow:2px 1px #555;
background-image:-webkit-gradient(
linear,left top,left bottom,
from(#FF6161),
to(#D83A89));}
.square_btn_orange:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;
}
/* ブルー*/
.square_btn_blue{
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
border-radius:10px;
text-shadow:2px 1px #555;
background-image:-webkit-gradient(
linear,left top,left bottom,
from(#34B2EA),
to(#6775D6));}
.square_btn_blue:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;
}
/* グリーン */
.square_btn_green{
display: inline-block;
padding: 0.3em 1em;
text-decoration: none;
background: #668ad8;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #627295;
border-radius: 3px;
border-radius:10px;
text-shadow:2px 1px #555;
background-image:-webkit-gradient(
linear,left top,left bottom,
from(#37AA68),
to(#3CA55C));}
.square_btn_green:active {/*ボタンを押したとき*/
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;
}
/* 背景ぼかし文字「オリジナルスイーツ」*/
.sample1oya{
padding : 20px;
}
.sample1{
display : inline-block;
font-size : 160%;
font-weight : bold;
color : #ffffff;
text-shadow: 2px 2px 10px #777 ,
-2px 2px 10px #777 ,
2px -2px 10px #777 ,
-2px -2px 10px #777;
}
/* テーブル風枠*/
.box300 {
margin: 2em 0;
background: #fffee9;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box300 .box-title {
font-size: 1.2em;
background: #ff0bb4;
padding: 4px;
text-align: center;
color: #FFF;
font-weight: bold;
letter-spacing: 0.05em;
}
.box300 p {
padding: 15px 20px;
margin: 0;
}
/* オンマウスでリンク文字が拡大*/
.cp_link {
display: inline-block;
padding: 0.3em;
transition: .3s;
transform: scale(1);
color: #F4511E;
}
.cp_link:hover {
transform: scale(1.05);
}
/* 点滅文字*/
.blinking{
animation-name: blink; /* アニメーションの名前を設定 */
animation-duration: 1.2s; /* アニメーションの秒数を設定 */
animation-iteration-count: infinite; /* 繰り返しを設定（１回だけなら不要） */
}
@keyframes blink{ /*上記で設定したアニメーションの動作を指定 */
0% {opacity:1;} /* 1.2s中の動作開始時間を%で指示 */
50% {opacity:0;} /* 同上 */
}
/*]]>*/
/* 点滅文字2*/
.blinking2{
animation-name: blink; /* アニメーションの名前を設定 */
animation-duration: 2.2s; /* アニメーションの秒数を設定 */
animation-iteration-count: infinite; /* 繰り返しを設定（１回だけなら不要） */
}
@keyframes blink{ /*上記で設定したアニメーションの動作を指定 */
0% {opacity:1;} /* 1.2s中の動作開始時間を%で指示 */
50% {opacity:0;} /* 同上 */
}
/*]]>*/
/**アクセスページ 矢印**/
.access_yazirushi{
width: 25px;
height: 25px;
border: 5px solid;
border-color: transparent transparent #7c7b7b #7c7b7b;
transform: rotate(-45deg);
margin-top:-9px;
margin-bottom:7px;
}
.access_yazirushi2{
width: 20px;
height: 20px;
border: 3px solid;
border-color: transparent transparent #7c7b7b #7c7b7b;
border-radius:3px;
transform: rotate(-45deg);
margin-top:6px;
margin-bottom:6px;
}
/* マウスオーバーで文字出現 */
.article-body {
height: 100%;
position: relative;
}
.article-link {
background-clip: padding-box;
color: white;
width: 425px;
height: 255px;
position: absolute;
top: 50%;
left: 50%;
overflow: hidden;
font: 600 16px/2em sans-serif;
text-decoration: none;
text-shadow: 0 0.1em 0.25em rgba(0, 0, 0, 0.5);
border-radius: .375em;
transform: translateX(-50%) translateY(-50%);
}
.article-link img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%) scale(0.85);
transition: all .3s ease;
}
.article-link:hover img, .article-link:focus img {
transform: translateX(-50%) translateY(-50%);
}
.article-title,
.article-date {
position: absolute;
top: 50%;
left: 50%;
white-space: nowrap;
}
.article-title {
display: block;
font-size: 2em;
transform: translateX(-50%) translateY(-50%);
transition: all .3s ease;
}
.article-link:hover .article-title, .article-link:focus .article-title {
transform: translateX(-50%) translateY(calc(-50% - .5em));
}
.article-date {
opacity: 0;
font-size: 1.25em;
transform: translateX(-50%) translateY(calc(-50% + 1.8em));
transition: all .3s ease;
}
.article-link:hover .article-date, .article-link:focus .article-date {
opacity: 1;
transform: translateX(-50%) translateY(calc(-50% + .8em));
transition: all .25s ease .05s;
}
/* 電話設定 */
.pc_denwa {
pointer-events: none;
}
.sumaho_denwa a {
display:none;
}
@media screen and (max-width: 768px) {
.pc_denwa {
display:none;
}
.sumaho_denwa a {
display:inline;
text-align:center;
}
}
/* ==========================================================================================================================================================================
↓↓ついてくるメニュー
========================================================================================================================================================================== */
.container2 {
padding: 1%;
}
.side2 {
display: flex;
align-items: center;
justify-content: center;
position: -webkit-sticky;
position: sticky;
top: 10px;
width: 140px;
height: 140px;
color: #fff;
background: #30b298;
z-index: 3;
}
.nav_header {
display:none;
}
@media screen and (max-width: 800px) {
.side2 {
display:none;
}
.nav_header {
display: flex;
align-items: center;
justify-content: center;
position: -webkit-sticky;
position: sticky;
top: 4px;
z-index: 3;
}
}
#nav3
{
width: 60em; /* 1000 */
font-family: 'Open Sans', sans-serif;
font-weight: 400;
position: absolute;
top: 35%;
left: 50%;
margin-left: -30em; /* 30 480 */
margin-top:30px;
margin-bottom:300px;
z-index: 5;
}
#nav3 > a
{
display: none;
}
#nav3 li
{
position: relative;
}
#nav3 li a
{
color: #fff;
display: block;
}
#nav3 li a:active
{
background-color: #c00 !important;
}
#nav3 span:after
{
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#nav3 > ul
{
height: 3.75em; /* 60 */
background-color: #e15a1f;
}
#nav3 > ul > li
{
width: 33%;
height: 100%;
float: left;
}
#nav3 > ul > li > a
{
height: 100%;
font-size: 1.5em; /* 24 */
line-height: 2.5em; /* 60 (24) */
text-align: center;
}
#nav3 > ul > li:not( :last-child ) > a
{
border-right: 1px solid #cc470d;
}
#nav3 > ul > li:hover > a,
#nav3 > ul:not( :hover ) > li.active > a
{
background-color: #cc470d;
}
/* second level */
#nav3 li ul
{
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
}
#nav3 li:hover ul
{
display: block;
left: 0;
right: 0;
}
#nav3 li:not( :first-child ):hover ul
{
left: -1px;
}
#nav3 li ul a
{
font-size: 1.25em; /* 20 */
border-top: 1px solid #e15a1f;
padding: 0.75em; /* 15 (20) */
}
#nav3 li ul li a:hover,
#nav3 li ul:not( :hover ) li.active a
{
background-color: #e15a1f;
}
@media only screen and ( max-width: 62.5em ) /* 1000 */
{
#nav3
{
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 50em ) /* 640 40em */
{
#nav3
{
position: relative;
top: auto;
left: auto;
margin-top:20px;
margin-bottom:200px;
}
#nav3 > a
{
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #e15a1f;
position: relative;
}
#nav3 > a:before,
#nav3 > a:after
{
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#nav3 > a:after
{
top: 60%;
}
#nav3:not( :target ) > a:first-of-type,
#nav3:target > a:last-of-type
{
display: block;
}
/* first level */
#nav3 > ul
{
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#nav3:target > ul
{
display: block;
}
#nav3 > ul > li
{
width: 100%;
float: none;
}
#nav3 > ul > li > a
{
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#nav3 > ul > li:not( :last-child ) > a
{
border-right: none;
border-bottom: 1px solid #cc470d;
}
/* second level */
#nav3 li ul
{
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
#syoukai_nav ul {
padding: 0;
}
#syoukai_nav ul, #syoukai_nav li {
list-style: none;
}
#syoukai_nav a {
font-family: sans-serif;
text-decoration: none;
}
#syoukai_nav {
width: 60em; /* 1000 */
position: absolute;
top: 25%;
left: 50%;
margin-left: -30em; /* 30 480 */
z-index: 2;
}
#syoukai_nav > a {
display: none;
}
#syoukai_nav li {
position: relative;
}
#syoukai_nav li a {
color: #fff;
display: block;
}
#syoukai_nav li a:active {
background-color: #c00 !important;
}
#syoukai_nav span:after {
width: 0;
height: 0;
border: 0.313em solid transparent; /* 5 */
border-bottom: none;
border-top-color: #efa585;
content: '';
vertical-align: middle;
display: inline-block;
position: relative;
right: -0.313em; /* 5 */
}
/* first level */
#syoukai_nav > ul {
height: 3.75em; /* 60 *//* 元設定→3.75em */
background-color: #e15a1f;
}
#syoukai_nav > ul > li {
width: 25%;
height: 100%;
float: left;
}
#syoukai_nav > ul > li > a {
height: 100%;
font-size: 1.25em; /* 24 *//* 元設定→1.5em */
line-height: 2.5em; /* 60 (24) */
text-align: center;
}
#syoukai_nav > ul > li:not( :last-child ) > a {
border-right: 1px solid #cc470d;
}
#syoukai_nav > ul > li:hover > a,
#syoukai_nav > ul:not( :hover ) > li.active > a {
background-color: #cc470d;
}
/* second level */
#syoukai_nav li ul {
background-color: #cc470d;
display: none;
position: absolute;
top: 100%;
}
#syoukai_nav li:hover ul {
display: block;
left: 0;
right: 0;
}
#syoukai_nav li:not( :first-child ):hover ul {
left: -1px;
}
#syoukai_nav li ul a {
font-size:1em; /* 20 *//* 元設定→1.25em */
border-top: 1px solid #e15a1f;
padding: 0.75em; /* 15 (20) */
}
#syoukai-nav li ul li a:hover,
#syoukai-nav li ul:not( :hover ) li.active a {
background-color: #e15a1f;
}
@media only screen and ( max-width: 62.5em ) { /* 1000 */
#syoukai_nav {
width: 100%;
position: static;
margin: 0;
}
}
@media only screen and ( max-width: 40em ) /* 640 */
{
#syoukai_nav {
position: relative;
top: auto;
left: auto;
}
#syoukai_nav > a {
width: 3.125em; /* 50 */
height: 3.125em; /* 50 */
text-align: left;
text-indent: -9999px;
background-color: #e15a1f;
position: relative;
}
#syoukai_nav > a:before,
#syoukai_nav > a:after {
position: absolute;
border: 2px solid #fff;
top: 35%;
left: 25%;
right: 25%;
content: '';
}
#syoukai_nav > a:after {
top: 60%;
}
#syoukai_nav:not( :target ) > a:first-of-type,
#syoukai_nav:target > a:last-of-type {
display: block;
}
/* first level */
#syoukai_nav > ul {
height: auto;
display: none;
position: absolute;
left: 0;
right: 0;
}
#syoukai_nav:target > ul {
display: block;
}
#syoukai_nav > ul > li {
width: 100%;
float: none;
}
#syoukai_nav > ul > li > a {
height: auto;
text-align: left;
padding: 0 0.833em; /* 20 (24) */
}
#syoukai_nav > ul > li:not( :last-child ) > a {
border-right: none;
border-bottom: 1px solid #cc470d;
}
/* second level */
#syoukai_nav li ul {
position: static;
padding: 1.25em; /* 20 */
padding-top: 0;
}
}
/* ==========================================================================
浮いたように画像表示
========================================================================== */
.fuwatAnime {
-webkit-animation-fill-mode:both;
-ms-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1.5s;
-ms-animation-duration:1.5s;
animation-duration:1.5s;
-webkit-animation-name: fuwatAnime;
-ms-animation-name: fuwatAnime;
animation-name: fuwatAnime;
visibility: visible !important;
}
@-webkit-keyframes fuwatAnime {
0% { opacity: 0; -webkit-transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fuwatAnime {
0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.aaa {
text-align:center;
width:200px;
padding:50px 0;
margin:100px auto;
background:#00BCD4;
color:#fff;
}
/* ==========================================================================
animateCssPlus.js animate.cssのオプション マウスオーバーで活用 時のcss設定
========================================================================== */
.btn { display: inline-block; margin-bottom: 10px; padding: 10px; border-radius: 4px; background-color: #a70d0d; color: #fff; text-align: center; font-size: 18px;}
.circle { display: inline-block; margin-bottom: 10px; padding: 10px; border-radius: 50%; background-color: #333; color: #fff; text-align: center; font-size: 18px;}
.block { padding: 1em;max-width: 800px; margin: auto; background-color: #dadada;}
.block:nth-child(2n) { background-color:#cccbb1}
.box1 { margin: auto; width: 300px;height: 300px; background-color: #b93838;}
.box2 { margin: auto; width: 300px;height: 300px; background-color: #38b959;}
/* ==========================================================================
inview.js スクロールで画像が表示される 時のcss設定
========================================================================== */
.inview {opacity: 0; display: flex; align-items:center; text-align: center; font-size: 50px;}
.inview span {display: block; width: 100%;}
.box1{display: none;}
/* ==========================================================================
MEDIA QUERIES
========================================================================== */
/* リンクジャンプ時に(アニメなし)上に空白を作る */
a.anchor{
display: block;
padding-top: 60px;
margin-top: -60px;
}
/* for Scroll Fix Header */
/* PC イベントメニュー スクロールで追従 */
.fix-header {
background: rgba(45,45,45,0.9);
top: -66px;/* 上に隠す鷹さ */
width: 100%;
padding-top:0px;/*60px*/
position: fixed;
opacity:0;/* 最初読み込んだときは透過 */
z-index: 1000;/* 他のアイテムに対して最上位のレイヤーになるように ※翻訳機能より下に設定*/
/* opacity: 0; */
}
/* PC イベントメニュー スクロールで追従 メニューの個別設定 */
#scroll-fix-menu{
margin-top:30px;
}
/* PC イベントメニュー スクロールで追従 翻訳押すとボタン位置変更 */
.translated-ltr #scroll-fix-menu{
margin-top:70px;
}
#scroll-fix-menu li ul li{
overflow: hidden;
height: 0;
transition: .2s;
}
#scroll-fix-menu li:hover ul li{
overflow: visible;
height: 44px;/*38px*/
}
.toplist a{
border:2px solid #FFF;
border-radius:10px;
top:4px;
font-weight:600;
}
.toplist a:hover{
background: #8c8c8c;
color: #FFF;
font-weight:600;
}
/* PC イベントメニュー スクロールで追従 メニューの数によって変わる設定 */
/*2メニュー */
.dropmenu2-2{
*zoom: 1;
list-style-type: none;
width:100%;
max-width: 380px;
margin: 2px auto 1px;
padding: 0;
}
.dropmenu2-2:before, .dropmenu2-2:after{
content: "";
display: table;
}
.dropmenu2-2:after{
clear: both;
}
.dropmenu2-2 li{
position: relative;
width: 50%; /* 20% */
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu2-2 li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #FFF;
font-size: 16px;
line-height: 1;
text-decoration: none;
border-radius:10px;
}
.dropmenu2-2 li ul{
list-style: none;
position: absolute;
z-index: 9998;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu2-2 li ul li{
width: 100%;
}
.dropmenu2-2 li ul li a{
padding: 13px 15px;
text-align: center;
}
/*3メニュー */
.dropmenu2-3{
*zoom: 1;
list-style-type: none;
width:100%;
max-width: 540px;
margin: 2px auto 1px;
padding: 0;
}
.dropmenu2-3:before, .dropmenu2-3:after{
content: "";
display: table;
}
.dropmenu2-3:after{
clear: both;
}
.dropmenu2-3 li{
position: relative;
width: 33.3334%; /* 20% */
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu2-3 li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #FFF;
font-size: 16px;
line-height: 1;
text-decoration: none;
border-radius:10px;
}
.dropmenu2-3 li ul{
list-style: none;
position: absolute;
z-index: 9998;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu2-3 li ul li{
width: 100%;
}
.dropmenu2-3 li ul li a{
padding: 13px 15px;
text-align: center;
}
/*４メニュー */
.dropmenu2-4{
*zoom: 1;
list-style-type: none;
width:100%;
max-width: 740px;
margin: 2px auto 1px;
padding: 0;
}
.dropmenu2-4:before, .dropmenu2-4:after{
content: "";
display: table;
}
.dropmenu2-4:after{
clear: both;
}
.dropmenu2-4 li{
position: relative;
width: 25%; /* 20% */
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu2-4 li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #FFF;
font-size: 16px;
line-height: 1;
text-decoration: none;
border-radius:10px;
}
.dropmenu2-4 li ul{
list-style: none;
position: absolute;
z-index: 9998;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu2-4 li ul li{
width: 100%;
}
.dropmenu2-4 li ul li a{
padding: 13px 15px;
text-align: center;
}
/*５メニュー */
.dropmenu2-5{
*zoom: 1;
list-style-type: none;
width:100%;
max-width: 960px;
margin: 2px auto 1px;
padding: 0;
}
.dropmenu2-5:before, .dropmenu2-5:after{
content: "";
display: table;
}
.dropmenu2-5:after{
clear: both;
}
.dropmenu2-5 li{
position: relative;
width: 20%; /* 20% */
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu2-5 li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #FFF;
font-size: 16px;
line-height: 1;
text-decoration: none;
border-radius:10px;
}
.dropmenu2-5 li ul{
list-style: none;
position: absolute;
z-index: 9998;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu2-5 li ul li{
width: 100%;
}
.dropmenu2-5 li ul li a{
padding: 13px 15px;
text-align: center;
}
/*６メニュー */
.dropmenu2-6{
*zoom: 1;
list-style-type: none;
width:100%;
max-width: 960px;
margin: 2px auto 1px;
padding: 0;
}
.dropmenu2-6:before, .dropmenu2-6:after{
content: "";
display: table;
}
.dropmenu2-6:after{
clear: both;
}
.dropmenu2-6 li{
position: relative;
width: 16%; /* 20% */
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu2-6 li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #FFF;
font-size: 16px;
line-height: 1;
text-decoration: none;
border-radius:10px;
}
.dropmenu2-6 li ul{
list-style: none;
position: absolute;
z-index: 9998;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu2-6 li ul li{
width: 100%;
}
.dropmenu2-6 li ul li a{
padding: 13px 15px;
text-align: center;
}
/*７メニュー */
.dropmenu2-7{
*zoom: 1;
list-style-type: none;
width:100%;
max-width: 1100px;
margin: 2px auto 1px;
padding: 0;
}
.dropmenu2-7:before, .dropmenu2-7:after{
content: "";
display: table;
}
.dropmenu2-7:after{
clear: both;
}
.dropmenu2-7 li{
position: relative;
width: 14%; /* 20% */
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu2-7 li a{
display: block;
margin: 0;
padding: 15px 0 11px;
color: #FFF;
font-size: 16px;
line-height: 1;
text-decoration: none;
border-radius:10px;
}
.dropmenu2-7 li ul{
list-style: none;
position: absolute;
z-index: 9998;
top: 100%;
left: 0;
margin: 0;
padding: 0;
}
.dropmenu2-7 li ul li{
width: 100%;
}
.dropmenu2-7 li ul li a{
padding: 14px 15px;
text-align: center;
font-size:16px;
}
/* PC イベントメニュー スクロールで追従 メニューの色設定 */
/* メロン狩り */
.melonlon{
font-weight:600;
}
.melonlon:hover > a{
background: #589600;
color: #FFF;
}
.melonlon ul li a{
background: #589600;
color: #FFF;
}
.melonlon li:hover > a{
background: #b9ef6c;
color: #005121;
}
.melonlon:hover ul li{
border-bottom: 1px solid #4c4c4b;
border-top: 1px solid #8ba012;
/*
border-left: 1px solid #73ff8d;
border-right: 1px solid #73ff8d;*/
border-radius:10px;
}
/* メロン食べ比べ */
.melonlon2 {
font-weight:600;
}
.melonlon2:hover > a{
background: #0a916a;
color: #FFF;
}
.melonlon2 ul li a{
background: #0a916a;
color: #FFF;
}
.melonlon2 li:hover > a{
background: #5cff92;
color: #005121;
}
.melonlon2:hover ul li{
border-bottom: 1px solid #4c4c4b;
/*
border-left: 1px solid #4c4c4b;
border-right: 1px solid #4c4c4b;*/
border-top: 1px solid #7559b2;
border-radius:10px;
}
/* メロン食べ放題 */
.melonlon3 {
font-weight:600;
}
.melonlon3:hover > a{
background: #aa9a27;
color: #FFF;
}
.melonlon3 ul li a{
background: #aa9a27;
color: #FFF;
}
.melonlon3 li:hover > a{
background: #b9ef6c;
color: #005121;
}
.melonlon3:hover ul li{
border-bottom: 1px solid #4c4c4b;
border-top: 1px solid #cc7e00;
/*
border-left: 1px solid #73ff8d;
border-right: 1px solid #73ff8d;*/
border-radius:10px;
}
/* デラウェア狩り */
.budobudou{
font-weight:600;
}
.budobudou:hover > a{
background: #963da3;
color: #FFF;
}
.budobudou ul li a{
background: #963da3;
color: #FFF;
}
.budobudou li:hover > a{
background: #f3bbff;
color: #56005b;
}
.budobudou:hover ul li{
border-bottom: 1px solid #4c4c4b;
/*
border-left: 1px solid #4c4c4b;
border-right: 1px solid #4c4c4b;*/
border-top: 1px solid #b79cf2;
border-radius:10px;
}
/* 巨峰狩り */
.budobudou2{
font-weight:600;
}
.budobudou2:hover > a{
background: #583da3;
color: #FFF;
}
.budobudou2 ul li a{
background: #583da3;
color: #FFF;
}
.budobudou2 li:hover > a{
background: #f3bbff;
color: #56005b;
}
.budobudou2:hover ul li{
border-bottom: 1px solid #4c4c4b;
/*
border-left: 1px solid #4c4c4b;
border-right: 1px solid #4c4c4b;*/
border-top: 1px solid #b79cf2;
border-radius:10px;
}
/* みかん狩り */
.mikamikan{
font-weight:600;
}
.mikamikan:hover > a{
background: #db880e;
color: #FFF;
}
.mikamikan ul li a{
background: #db880e;
color: #FFF;
}
.mikamikan li:hover > a{
background: #fff492;
color: #bc4a17;
}
.mikamikan:hover ul li{
border-bottom: 1px solid #b5691d;
/*
border-left: 1px solid #4c4c4b;
border-right: 1px solid #4c4c4b;*/
border-top: 1px solid #a34d33;
border-radius:10px;
}
/* いちご狩り */
.ichiichigo{
font-weight:600;
}
.ichiichigo:hover > a{
background: #ff2e8d;
color: #FFF;
}
.ichiichigo ul li a{
background: #ff2e8d;
color: #FFF;
}
.ichiichigo li:hover > a{
background: #ffb3e4;
color: #8c0000;
}
.ichiichigo:hover ul li{
border-bottom: 1px solid #c94324;
/*
border-left: 1px solid #4c4c4b;
border-right: 1px solid #4c4c4b;*/
border-top: 1px solid #ffc5c5;
border-radius:10px;
}
/* 特別セット */
.tokutoku{
font-weight:600;
}
.tokutoku:hover > a{
background: #267cf9;
color: #FFF;
}
.tokutoku ul li a{
background: #267cf9;
color: #FFF;
}
.tokutoku li:hover > a{
background: #9febff;
color: #002199;
}
.tokutoku:hover ul li{
border-bottom: 1px solid #31798c;
/*
border-left: 1px solid #4c4c4b;
border-right: 1px solid #4c4c4b;*/
border-top: 1px solid #9febff;
border-radius:10px;
}
/* 野外BBQ */
.yagai a{
border:2px solid #ff83dc;
border-radius:10px;
top:4px;
font-weight:600;
}
.yagai a:hover{
background: #ff52a5;
color: #FFF;
font-weight:600;
}
/* ★完成★ PC イベントメニュー ヘッダー部分のみ表示 ★共通設定★↓↓ */
/* 野外BBQ メニュー色設定 */
.droplist-0 a:hover {
background: #F69;
color: #FFF;
}
.fdfd{
background:#F69;
padding:2px;
border-radius:3px;
}
/* ★☆★☆★☆ メニューの下線設定 ★☆★☆★☆★☆ */
/* メニューの下線設定 */
/* メロン狩り */
.droplist-1{
border-bottom: 5px solid #00b200;
}
/* メロン食べ比べ */
.droplist-2{
border-bottom: 5px solid #7eaa1f;
}
/* メロン食べ放題 */
.droplist-3{
border-bottom: 5px solid #098c25;
}
/* デラウェア狩り */
.droplist-4{
border-bottom: 5px solid #bb33d3;
}
/* 巨峰狩り */
.droplist-5{
border-bottom: 5px solid #7724c6;
}
/* みかん狩り */
.droplist-6{
border-bottom: 5px solid #ff8110;
}
/* いちご狩り */
.droplist-7{
border-bottom: 5px solid #ff2e65;
}
/* 特別セット */
.droplist-8{
border-bottom: 5px solid #647eff;
}
/* 野外BBQ */
.droplist-0{
border-bottom: 5px solid #F69;
}
/* メニューリストの個別色設定 */
/* ★★★★★★ メニュー見出し ホバー 色 緑１ ★★★★★★*/
/* メロン狩り */
.green1-menulist:hover > a{
background: #00723e;
color: #FFF;
}
/* リストリンク 色 */
.green1-menulist ul li a{
background: #00723e;
color: #FFF;
}
/* リスト ホバー 色 */
.green1-menulist ul li:nth-child(odd):hover a{
background: #5cff92;
color: #005121;
}
.green1-menulist ul li:nth-child(even):hover a{
background: #83f2df;
color: #005121;
}
/* ★★★★★★ メニュー見出し ホバー 色 緑２ ★★★★★★*/
/* メロン食べ比べ */
.green2-menulist:hover > a{
background: #468707;
color: #FFF;
}
/* リストリンク 色 */
.green2-menulist ul li a{
background: #468707;
color: #FFF;
}
/* リスト ホバー 色 */
.green2-menulist ul li:nth-child(odd):hover a{
background: #9ef27c;
color: #005121;
}
.green2-menulist ul li:nth-child(even):hover a{
background: #f2e47c;
color: #005121;
}
/* ★★★★★★ メニュー見出し ホバー 色 緑３ ★★★★★★ */
/* メロン食べ放題 */
.green3-menulist:hover > a{
background: #0e8e20;
color: #FFF;
}
/* リストリンク 色 */
.green3-menulist ul li a{
background: #0e8e20;
color: #FFF;
}
/* リスト ホバー 色 */
.green3-menulist ul li:nth-child(odd):hover a{
background: #66d876;
color: #005121;
}
.green3-menulist ul li:nth-child(even):hover a{
background: #78c64a;
color: #005121;
}
/* ★★★★★★ メニュー見出し ホバー 色 紫１ ★★★★★★ */
/* デラウェア狩り */
.purple-menulist:hover > a{
background: #9a1aad;
color: #FFF;
}
/* リストリンク 色 */
.purple-menulist ul li a{
background: #9a1aad;
color: #FFF;
}
/* リスト ホバー 色 */
.purple-menulist ul li:nth-child(odd):hover a{
background: #aa92ff;
color: #560072;
}
.purple-menulist ul li:nth-child(even):hover a{
background: #e288ff;
color: #560072;
}
/* ★★★★★★ メニュー見出し ホバー 色 紫２ ★★★★★★*/
/* 巨峰狩り */
.blue-menulist:hover > a{
background: #3c35d8;
color: #FFF;
}
/* リストリンク 色 */
.blue-menulist ul li a{
background: #3c35d8;
color: #FFF;
}
/* リスト ホバー 色 */
.blue-menulist ul li:nth-child(odd):hover a{
background: #baa9ff;
color: #560072;
}
.blue-menulist ul li:nth-child(even):hover a{
background: #6eb0ff;
color: #560072;
}
/* ★★★★★★ メニュー見出し ホバー 色 オレンジ ★★★★★★*/
/* みかん狩り */
.orange-menulist:hover > a{
background: #ff6f03;
color: #FFF;
}
/* リストリンク 色 */
.orange-menulist ul li a{
background: #ff6f03;
color: #FFF;
}
/* リスト ホバー 色 */
.orange-menulist ul li:nth-child(odd):hover a{
background: #ffb92e;
color: #9e4f2d;
}
.orange-menulist ul li:nth-child(even):hover a{
background: #ffef2e;
color: #9e4f2d;
}
/* ★★★★★★ メニュー見出し ホバー 色 赤 ★★★★★★*/
/* いちご狩り */
.red-menulist:hover > a{
background: #ea244f;
color: #FFF;
}
/* リストリンク 色 */
.red-menulist ul li a{
background: #ea244f;
color: #FFF;
}
/* リスト ホバー 色 */
.red-menulist ul li:nth-child(odd):hover a{
background: #ff839e;
color: #b70f3b;
}
.red-menulist ul li:nth-child(even):hover a{
background: #ffa4fb;
color: #b70f3b;
}
/* ★★★★★★ メニュー見出し ホバー 色 水色 ★★★★★★*/
/* 特別プラン */
.skyblue-menulist:hover > a{
background: #647eff;
color: #FFF;
}
/* リストリンク 色 */
.skyblue-menulist ul li a{
background: #647eff;
color: #FFF;
}
/* リスト ホバー 色 */
.skyblue-menulist ul li:nth-child(odd):hover a{
background: #aefff1;
color: #414cb7;
}
.skyblue-menulist ul li:nth-child(even):hover a{
background: #6ed6ff;
color: #414cb7;
}
/* ★★★★★★ PCヘッダーのイベントメニュー限定で使用・矢印アニメーション設定 通常 矢印大きい ★★★★★★*/
.arrow2-1{
width: 8px;
margin: 0 auto;
-webkit-animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
position: relative;
display: block;
left: 40%;
}
.arrow2-1:before {
content: '';
width: 1px;
height: 4px;
border: 0;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-top: 8px solid #8e8e8e;
border-radius:10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-sizing: border-box;
}
/* PCヘッダーのイベントメニュー限定で 矢印アニメーション設定 メニュー６ 矢印小さい */
.arrow2-2 {
width: 1px;
margin: 0 auto;
-webkit-animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
animation: arrow 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0s infinite alternate;
position: relative;
display: block;
left: 40%;
}
.arrow2-2:before {
content: '';
width: 2px;
height: 8px;
border: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 7px solid #8e8e8e;
border-radius:10px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
box-sizing: border-box;
}
@keyframes arrow {
0% {
opacity: 1;
-webkit-transform: translate3d(-50%, 0, 0);
transform: translate3d(-50%, 0, 0);
}
100% {
opacity: 0.5;
-webkit-transform: translate3d(-50%, -8px, 0);
transform: translate3d(-50%, -8px, 0);
}
}
/* ★完成★ PC イベントメニュー ヘッダー部分のみ表示 ２メニュー↓↓ */
.dropmenu3-2{
list-style-type: none;
width:100%;
max-width: 500px;
height: 50px;
margin: 0 auto; /*30px auto 300px;*/
padding: 0;
background: #FFF;
border-radius: 3px 3px 0 0;
border-bottom: 5px solid #535d09;
box-shadow: 2px 2px 4px #FFC0C0;
border: solid 1px #C1C1C1;
}
.dropmenu3-2 li{
position: relative;
width: 50%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu3-2 li a{
display: block;
margin: 0;
padding: 17px 0 11px;
color: #595959;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
text-decoration: none;
}
.dropmenu3-2 li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border-radius: 0 0 3px 3px;
}
.dropmenu3-2 li:last-child ul{
left: -100%;
width: 100%
}
.dropmenu3-2 li ul li{
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
.dropmenu3-2 li ul li a{
padding: 13px 15px;
font-size: 17px;
font-weight:800;
text-align:center;
margin-right:5px;
}
.dropmenu3-2 > li:hover > a{
border-radius: 3px 3px 0 0;
}
.dropmenu3-2 li:hover ul li{
overflow: visible;
height: 46px;/*38px*/
}
.dropmenu3-2 li:hover ul li:first-child{
border-top: 0;
}
.dropmenu3-2 li:hover ul li:last-child{
border-bottom: 0;
}
.dropmenu3-2 li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}
/* ★完成★ PC イベントメニュー ヘッダー部分のみ表示 ３メニュー↓↓ */
.dropmenu3-3{
list-style-type: none;
width:100%;
max-width: 800px;
height: 50px;
margin: 0 auto; /*30px auto 300px;*/
padding: 0;
background: #FFF;
border-radius: 3px 3px 0 0;
border-bottom: 5px solid #535d09;
box-shadow: 2px 2px 4px #FFC0C0;
border: solid 1px #C1C1C1;
}
.dropmenu3-3 li{
position: relative;
width: 33.333334%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu3-3 li a{
display: block;
margin: 0;
padding: 17px 0 11px;
color: #595959;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
text-decoration: none;
}
.dropmenu3-3 li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border-radius: 0 0 3px 3px;
}
.dropmenu3-3 li:last-child ul{
left: -100%;
width: 100%
}
.dropmenu3-3 li ul li{
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
.dropmenu3-3 li ul li a{
padding: 13px 15px;
font-size: 17px;
font-weight:800;
text-align:center;
margin-right:5px;
}
.dropmenu3-3 > li:hover > a{
border-radius: 3px 3px 0 0;
}
.dropmenu3-3 li:hover ul li{
overflow: visible;
height: 46px;/*38px*/
}
.dropmenu3-3 li:hover ul li:first-child{
border-top: 0;
}
.dropmenu3-3 li:hover ul li:last-child{
border-bottom: 0;
}
.dropmenu3-3 li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}
/* ★完成★ PC イベントメニュー ヘッダー部分のみ表示 ４メニュー↓↓ */
.dropmenu3-4{
list-style-type: none;
width:100%;
max-width: 1000px;
height: 50px;
margin: 0 auto; /*30px auto 300px;*/
padding: 0;
background: #FFF;
border-radius: 3px 3px 0 0;
border-bottom: 5px solid #535d09;
box-shadow: 2px 2px 4px #FFC0C0;
border: solid 1px #C1C1C1;
}
.dropmenu3-4 li{
position: relative;
width: 25%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu3-4 li a{
display: block;
margin: 0;
padding: 17px 0 11px;
color: #595959;
font-size: 16px;
font-weight: bold;
line-height: 1.13;
text-decoration: none;
}
.dropmenu3-4 li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border-radius: 0 0 3px 3px;
}
.dropmenu3-4 li:last-child ul{
left: -100%;
width: 100%
}
.dropmenu3-4 li ul li{
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
.dropmenu3-4 li ul li a{
padding: 13px 15px;
font-size: 17px;
font-weight:800;
text-align:center;
margin-right:5px;
}
.dropmenu3-4 > li:hover > a{
border-radius: 3px 3px 0 0;
}
.dropmenu3-4 li:hover ul li{
overflow: visible;
height: 46px;/*38px*/
}
.dropmenu3-4 li:hover ul li:first-child{
border-top: 0;
}
.dropmenu3-4 li:hover ul li:last-child{
border-bottom: 0;
}
.dropmenu3-4 li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}
/* ★完成★ PC イベントメニュー ヘッダー部分のみ表示↑↑ */
/* ★完成★ PC イベントメニュー ヘッダー部分のみ表示 ５メニュー↓↓ */
.dropmenu3-5{
list-style-type: none;
width:100%;
max-width: 1099px;
height: 50px;
margin: 0 auto; /*30px auto 300px;*/
padding: 0;
background: #FFF;
border-radius: 3px 3px 0 0;
border-bottom: 5px solid #535d09;
box-shadow: 2px 2px 4px #FFC0C0;
border: solid 1px #C1C1C1;
}
.dropmenu3-5 li{
position: relative;
width: 20%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu3-5 li a{
display: block;
margin: 0;
padding: 17px 0 11px;
color: #595959;
font-size: 15px;
font-weight: bold;
line-height: 1.13;
text-decoration: none;
}
.dropmenu3-5 li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border-radius: 0 0 3px 3px;
}
.dropmenu3-5 li:last-child ul{
left: -100%;
width: 100%
}
.dropmenu3-5 li ul li{
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
.dropmenu3-5 li ul li a{
padding: 13px 15px;
font-size: 17px;
font-weight:800;
text-align:center;
margin-right:5px;
}
.dropmenu3-5 > li:hover > a{
border-radius: 3px 3px 0 0;
}
.dropmenu3-5 li:hover ul li{
overflow: visible;
height: 46px;/*38px*/
}
.dropmenu3-5 li:hover ul li:first-child{
border-top: 0;
}
.dropmenu3-5 li:hover ul li:last-child{
border-bottom: 0;
}
.dropmenu3-5 li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}
/* ★完成★ PC イベントメニュー ヘッダー部分のみ表示 ６メニュー↓↓ */
.dropmenu3-6{
list-style-type: none;
width:100%;
max-width: 1199px;
height: 50px;
margin: 0 auto; /*30px auto 300px;*/
padding: 0;
background: #FFF;
border-radius: 3px 3px 0 0;
border-bottom: 5px solid #535d09;
box-shadow: 2px 2px 4px #FFC0C0;
border: solid 1px #C1C1C1;
}
.dropmenu3-6 li{
position: relative;
width: 16.6670999%;
float: left;
margin: 0;
padding: 0;
text-align: center;
}
.dropmenu3-6 li a{
display: block;
margin: 0;
padding: 17px 0 11px;
color: #595959;
font-size: 15px;
font-weight: bold;
line-height: 1.13;
text-decoration: none;
}
.dropmenu3-6 li ul{
list-style: none;
position: absolute;
top: 100%;
left: 0;
margin: 0;
padding: 0;
border-radius: 0 0 3px 3px;
}
.dropmenu3-6 li:last-child ul{
left: -100%;
width: 100%
}
.dropmenu3-6 li ul li{
overflow: hidden;
width: 100%;
height: 0;
color: #fff;
-moz-transition: .2s;
-webkit-transition: .2s;
-o-transition: .2s;
-ms-transition: .2s;
transition: .2s;
}
.dropmenu3-6 li ul li a{
padding: 13px 15px;
font-size: 17px;
font-weight:800;
text-align:center;
margin-right:5px;
}
.dropmenu3-6 > li:hover > a{
border-radius: 3px 3px 0 0;
}
.dropmenu3-6 li:hover ul li{
overflow: visible;
height: 46px;/*38px*/
}
.dropmenu3-6 li:hover ul li:first-child{
border-top: 0;
}
.dropmenu3-6 li:hover ul li:last-child{
border-bottom: 0;
}
.dropmenu3-6 li:hover ul li:last-child a{
border-radius: 0 0 3px 3px;
}
/* ★完成★ PC イベントメニュー ヘッダー部分のみ表示↑↑ */
.accordion2 {text-align: center;}
.accordion2 .inner {display: none;}
.accordion2 {cursor: pointer; padding: 10px; max-width:800px; border-radius: 3px;}
.accordion2 .ac1{background: #F50057;
border-bottom: 5px solid #535d09;
padding:10px;}
.accordion2 .ac2{background: #FFEA00;
border-bottom: 5px solid #535d09;
padding:10px;}
.accordion2 .ac3{background: #64DD17;
border-bottom: 5px solid #535d09;
padding:10px;}
.accordion2 .inner li{padding: 10px 0;}
.accordion2 .inner li.content1-1{background: #F48FB1;}
.accordion2 .inner li.content1-2{background: #F8BBD0;}
.accordion2 .inner li.content1-3{background: #FCE4EC;}
.accordion2 .inner li.content2-1{background: #FFF59D;}
.accordion2 .inner li.content2-2{background: #FFF9C4;}
.accordion2 .inner li.content2-3{background: #FFFDE7;}
.accordion2 .inner li.content3-1{background: #C5E1A5;}
.accordion2 .inner li.content3-2{background: #DCEDC8;}
.accordion2 .inner li.content3-3{background: #F1F8E9;}
@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
.acc-container {
width:100%;
max-width:600px;
margin:30px auto 0 auto;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
overflow: hidden;
text-align:center;
}
.acc-btn {
width:100%;
margin:0 auto;
padding:20px 25px;
cursor:pointer;
background:#34495E;
border-bottom:1px solid #2C3E50;
}
.acc-content {
width:100%;
margin:0 auto;
display: none;
background:#2C3E50;
padding:30px;
height: auto;
}
.acc-content ul li {
width:100%;
padding:10px;
font-size:15px;
}
.acc-content a li {
color:#FFF;
text-align:center;
}
.acc-content a li:hover {
background-color: #998bfa;
transition: all .3s;
}
h16 {
font:700 20px/26px 'Lato', sans-serif;
color:#ffffff;
}
/* ★完成★ スマホメニュー↓↓ */
.accordion_dl {
width:100%;
max-width:400px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
-o-border-radius:8px;
border-radius:8px;
overflow: hidden;
text-align:center;
border: solid 1px #C1C1C1;
box-shadow: 2px 2px 4px #C1C1C1;
}
.yazirushi_ari {
background-color: #FFF;
margin-bottom: 1px;
padding: 10px;
color: #1C1C1C;
cursor: pointer;
position: relative;
font-size:18px;
color: #595959;
}
.yazirushi_ari:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #666;
}
.yazirushi_ari:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #FFF;
}
.yazirushi_ari.active:before {
margin-top: -2px;
}
.yazirushi_ari.active:after {
margin-top: 3px;
}
.yazirushi_nashi {
background-color: #FF2CAA;
padding: 10px;
color: #FFF;
cursor: pointer;
position: relative;
}
.yazirushi_nashi a{
width: 100%;
height: 100%;
font-size:20px;
color: #FFF;
}
.yazirushi_nashi2 {
background-color: #A7AEBC;
padding: 10px;
color: #FFF;
cursor: pointer;
position: relative;
}
.yazirushi_nashi2 a{
font-size:20px;
color: #FFF;
}
/*
.yazirushi_ari改変↓↓ */
.yazirushi_ari2 {
padding: 10px;
color: #1C1C1C;
cursor: pointer;
position: relative;
color: #565452;
border-radius:10px;
margin-bottom:5px;
font-size:17px;
font-weight:700;
}
.orange-menu{
background: #FFAD29;
border-left: solid 20px #FFF492;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
.blue-menu{
background: #94ABFF;
border-left: solid 20px #BDFFFF;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
.skyblue-menu{
background: #25D7F4;
border-left: solid 20px #C0FFDF;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
.pink-menu{
background: #FF8DD1;
border-left: solid 20px #FFDCE9;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
.red-menu{
background: #FF6E6E;
border-left: solid 20px #FFAEAE;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
.purple-menu{
background: #BD71FF;
border-left: solid 20px #FFAEFB;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
.green-menu{
background: #76D84C;
border-left: solid 20px #C8F9B4;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
.green2-menu{
background: #40C18D;
border-left: solid 20px #75F9E5;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
.green3-menu{
background: #B1C43F;
border-left: solid 20px #F7F5A1;/*左線*/
color: #FFF;/*文字色*/
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
padding-right:30px;
}
/*スマホ サブメニュー矢印*/
.orange-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #FFF492;
}
.blue-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #BDFFFF;
}
.skyblue-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #C0FFDF;
}
.pink-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #FFDCE9;
}
.red-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #FFAEAE;
}
.purple-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #FFAEFB;
}
.green-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #C8F9B4;
}
.green2-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #75F9E5;
}
.green3-menu:before {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -8px;
background: #F7F5A1;
}
.orange-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #FFAD29;
}
.blue-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #94ABFF;
}
.skyblue-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #25D7F4;
}
.pink-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #FF8DD1;
}
.red-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #FF6E6E;
}
.purple-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #BD71FF;
}
.green-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #76D84C;
}
.green2-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #40C18D;
}
.green3-menu:after {
display: block;
content: "";
position: absolute;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 50%;
right: 15px;
width: 10px;
height: 10px;
margin-top: -13px;
background: #B1C43F;
}
.yazirushi_ari2.active:before {
margin-top: -2px;
}
.yazirushi_ari2.active:after {
margin-top: 3px;
}
/* ピンク */
.sub_back-0{
background-color: rgba(255,225,251,0.5);
border-top: dotted 3px #FF50EA;
border-bottom: dotted 3px #FF50EA;
padding: 8px 28px 8px 24px;
margin-right:-5px;
}
/* 緑 */
.sub_back-1{
background-color: rgba(232,255,209,0.5);
border-top: dotted 3px #24D130;
border-bottom: dotted 3px #24D130;
padding: 8px 28px 8px 24px;
margin-right:-5px;
}
/* 紫 */
.sub_back-2{
background-color: rgba(209, 202, 255, 0.3);
border-top: dotted 3px #B383FF;
border-bottom: dotted 3px #B383FF;
padding: 8px 28px 8px 24px;
margin-right:-5px;
}
/* うすピンク */
.sub_back-3{
background-color: #F4DCFF;
border-top: dotted 3px #EB9DF9;
border-bottom: dotted 3px #EB9DF9;
padding: 8px 28px 8px 24px;
margin-right:-5px;
}
/* オレンジ */
.sub_back-4{
background-color: rgba(255, 242, 217, 0.5);
border-top: dotted 3px #F99926;
border-bottom: dotted 3px #F99926;
padding: 8px 28px 8px 24px;
margin-right:-5px;
}
/* 水色 */
.sub_back-5{
background-color: rgba(210, 255, 255, 0.3);
border-top: dotted 3px #35E0FC;
border-bottom: dotted 3px #35E0FC;
padding: 8px 28px 8px 24px;
margin-right:-5px;
}
.mama{
display:none;
}
.mama li a{
display:block;
font-size:16px;
font-weight:bold;
}
.orange-side{
background-color: #FFD9B0;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.orange-side li{
padding:20px;
border-bottom: dotted 1px #E58200;
position: relative;
}
.orange-side li a{
color:#9B4D00;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.orange-side li a:hover{
width:100%;
background-color: #FF9D83;
color:#FFD9B0;
}
.blue-side{
background-color: #9FD4FF;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.blue-side li{
padding:20px;
border-bottom: dotted 1px #FF3;
position: relative;
}
.blue-side li a{
color:#004E8E;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.blue-side li a:hover{
width:100%;
background-color: #A888FF;
color:#FFD9B0;
}
.skyblue-side{
background-color: #71EAEA;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.skyblue-side li{
padding:20px;
border-bottom: dotted 1px #386996;
position: relative;
}
.skyblue-side li a{
color:#004E8E;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.skyblue-side li a:hover{
width:100%;
background-color: #9CAAF7;
color:#FFF0B3;
}
.pink-side{
background-color: #FFD9EB;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.pink-side li{
padding:20px;
border-bottom: dotted 1px #FF4588;
position: relative;
}
.pink-side li a{
color:#8E0332;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.pink-side li a:hover{
width:100%;
background-color: #FF9CB4;
color:#FFD9B0;
}
.red-side{
background-color: #FFBDBD;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.red-side li{
padding:20px;
border-bottom: dotted 1px #FF4588;
position: relative;
}
.red-side li a{
color:#8E0332;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.red-side li a:hover{
width:100%;
background-color: #FF5576;
color:#FFD9B0;
}
.purple-side{
background-color: #DDAEFF;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.purple-side li{
padding:20px;
border-bottom: dotted 1px #FFF;
position: relative;
}
.purple-side li a{
color:#8E0332;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.purple-side li a:hover{
width:100%;
background-color: #BE54FC;
color:#FFD9B0;
}
.green-side{
background-color: #98F991;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.green-side li{
padding:20px;
border-bottom: dotted 1px #6FBF28;
position: relative;
}
.green-side li a{
color:#006D41;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.green-side li a:hover{
width:100%;
background-color: #86D354;
color:#FFD9B0;
}
.green2-side{
background-color: #75EFBD;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.green2-side li{
padding:20px;
border-bottom: dotted 1px #6FBF28;
position: relative;
}
.green2-side li a{
color:#006D41;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.green2-side li a:hover{
width:100%;
background-color: #33C180;
color:#FFD9B0;
}
.green3-side{
background-color: #D8E561;
border-top: dashed 5px #FFF;
border-bottom: dashed 5px #FFF;
padding:10px 25px 10px 20px;
line-height: 37px;
}
.green3-side li{
padding:20px;
border-bottom: dotted 1px #9DAA1F;
position: relative;
}
.green3-side li a{
color:#006D41;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 100%;
font-size:17px;
}
.green3-side li a:hover{
width:100%;
background-color: #CCC53A;
color:#FFD9B0;
}
/* ★完成★ スマホメニュー ↑↑ */
/* ホバーすると線がつくアニメ */
.underline-pink {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-pink::after {
background-color: #ffaeea;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-pink:hover::after {
width: 100%;
}
.underline-red {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-red::after {
background-color: #ff9999;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-red:hover::after {
width: 100%;
}
.underline-orange {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-orange::after {
background-color: #fffc0e;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-orange:hover::after {
width: 100%;
}
.underline-blue {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-blue:after {
background-color: #63d8ff;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-blue:hover::after {
width: 100%;
}
.underline-skyblue {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-skyblue:after {
background-color: #22ffda;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-skyblue:hover::after {
width: 100%;
}
.underline-green {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-green:after {
background-color: #73ff5f;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-green:hover::after {
width: 100%;
}
.underline-green2 {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-green2:after {
background-color: #8dffb6;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-green2:hover::after {
width: 100%;
}
.underline-green3 {
display: inline-block;
padding-bottom: 6px;
position: relative;
}
.underline-green3:after {
background-color: #caed4a;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-green3:hover::after {
width: 100%;
}
.underline-purple {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-purple:after {
background-color: #d69cff;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-purple:hover::after {
width: 100%;
}
.underline-white {
display: inline-block;
padding-bottom: 4px;
position: relative;
}
.underline-white:after {
background-color: #d1d1d1;
bottom: 0;
content: '';
display: block;
height: 3px;
left: 0;
position: absolute;
transition: .5s all;
width: 0;
}
.underline-white:hover::after {
width: 100%;
}
/* PC スクロールヘッダーのイベントメニュー限定で使用・三角下矢印▼表示設定 */
/* 白矢印 文字数少ないとき */
.button-shita{
position: absolute;
width: 0;
height: 0;
right: 20px;
top: 65%;
padding-top:5px;
border-left: 4px solid transparent;
border-top: 6px solid #FFF;
border-right: 4px solid transparent;
}
/* PC スクロールヘッダーのイベントメニュー限定で使用・三角下矢印▼表示設定 */
/* 白矢印 メニュー数少ないとき */
.button-shita2{
position: absolute;
width: 0;
height: 0;
right: 40px;
top: 45%;
padding-top:0px;
border-left: 5px solid transparent;
border-top: 7px solid #FFF;
border-right: 5px solid transparent;
}
/* 固定 */
.fixed2 {
position: fixed;
top: 0;
padding: 0;
width: 100%;
z-index: 1000;
}
#globalNavi {
position: fixed;
bottom: 20px;
right: 20px;
font-size: 77%;
}
#globalNavi p {
background: #666;
text-decoration: none;
color: #fff;
width: 100px;
padding: 30px 0;
text-align: center;
display: block;
border-radius: 5px;
}
@media screen and (max-width:1050px), screen and (max-device-width:1050px){
body .header{background-attachment: scroll;}
}
/*ipad portrait*/
@media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait){
.header{background-attachment: scroll;}
}
/**** ショピング ボタン *****/
.btn-shopping {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #60c46c;/*背景色*/
border-bottom: solid 2px #4b9654;/*少し濃い目の色に*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
font-weight: bold;
}
.btn-shopping:active {
border-bottom: solid 2px #60c46c;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆◆◆◆◆◆ 検索テスト ◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
.input{
display: none;
}
.bl_3daysSearchBlock{
margin-bottom: 60px;
}
.bl_3daysSearchBlock_inner{
width: 82.9%; /**このまま**/
max-width: 1160px;
margin-left: auto;/**このまま**/
margin-right: auto;/**このまま**/
}
.bl_3daysSearchBlock_ttl{
text-align: center;
margin: 55px 0;
}
.bl_3daysSearchBlock_ttl_main{
font-size: 27px;
color: #0073aa;
margin-bottom: 15px;
font-weight: bold;
letter-spacing: 0.15em;
font-family: "Josefin Sans" , "NotoSansCJKjp-Jxck", "Noto Sans CJK JP" , "Noto Sans" , "Noto Sans Japanese" ,"Helvetica Neue", "Meiryo" , "メイリオ", "YuGothic", "游ゴシック",sans-serif;
}
.bl_3daysSearchBlock_ttl_sub{
font-size: 16px;
color: #0073aa;
letter-spacing: 0.2em;
}
.el_searchResult{
text-align: center;
color: #0073aa;
}
.js_target{
display: none;
}
.js_target.js_selected{
display: block;
}
.bl_selectBlock label{
display: inline;
}
.bl_selectBlock input{
}
.bl_selectBlock_check label .el_checkbox{
position: relative;
top: 3px;
width: 14px;
height: 14px;
display: inline-block;
margin-right: 5px;
border: 1px solid #0073aa;
}
.bl_selectBlock_check label .el_checkbox:after{
content: "";
position: absolute;
top: 4px;
left: 4px;
bottom: 4px;
right: 4px;
}
.bl_selectBlock_check input[type=checkbox]:checked + label .el_checkbox:after{
background-color: #0073aa;
}
.el_searchResult{
margin-bottom: 20px;
}
.bl_selectBlock{
border: 1px solid #0073aa;
padding: 30px;
box-sizing: border-box;
margin-bottom: 30px;
font-size: 14px;
letter-spacing: 0.1em;
}
.bl_selectBlock_wrapper_wrapper{
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 30px;
}
.bl_selectBlock_check label{
cursor: pointer;
}
.bl_selectBlock_ttl{
width: 185px;
color: #0073aa;
letter-spacing: 0.1em;
margin-bottom: 20px;
}
@media screen and (max-width: 765px){
.bl_selectBlock_ttl{
width: 100%;
margin-bottom: 20px;
}
}
.bl_selectBlock_content{
width: calc(100% - 185px);
}
@media screen and (max-width: 765px){
.bl_selectBlock_content{
width: 100%;
}
}
.bl_searchResultBlock{
font-size: 14px;
border-top: 1px solid #bdbdbd;
/** width:100%; 無効 **/
/**float:left;**/
}
.bl_searchResultBlock_item{
padding: 20px 0;
box-sizing: border-box;
border-bottom: 1px solid #bdbdbd;
/**float:left;!important
/**width:100%;**/
display: flex;
}
.bl_selectBlock_check{
display: inline-block;
margin-right: 25px;
display: inline-block;
margin-bottom: 20px;
}
.bl_selectBlock_check:last-child{
margin-right: 0;
}
.bl_selectBlock_release{/** すべての選択を解除 ボタン **/
text-align: center;
color: #fff;
background-color: #bdbdbd;
padding: 15px 0;
}
.js_release{
cursor: pointer;
}
.bl_searchResultBlock_item js_target{
float:left;
}
/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
/* ◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆◆ */
#menu-container{
padding-top: 20px;
padding-bottom: 20px;
}
#menu-container .menu-listn {
padding-left: 0;
display: block;
width: 100%;
max-width: 450px;
background: white;
box-shadow: rgba(100,100,100,0.2) 6px 2px 10px;
z-index: 999;
}
#menu-container .menu-listn li.accordion-toggle, #menu-container .menu-listn .menu-login {
font-size: 16px;
padding: 20px;
text-transform: uppercase;
}
#menu-container .menu-listn li:first-of-type {
border-top: 0;
}
.accordion-toggle, .accordion-content {
cursor: pointer;
font-size: 16px;
position: relative;
letter-spacing: 1px;
}
.accordion-content {
display: none;
}
.accordion-toggle a:before, .accordion-toggle a:after {
content: '';
display: block;
position: absolute;
top: 50%;
right: 30px;
width: 15px;
height: 2px;
margin-top: -1px;
background-color: #5a5858;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transition: all 0.3s;
transition: all 0.3s ease-out;
}
.accordion-toggle a:before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
opacity: 1;
z-index: 2;
}
/* クリック後のメニュー色*/
.ichigo-sumaho.active-tab{
background: #ff3985;
transition: all 0.3s ease;
color:#FFF;
font-weight:700;
}
.melon-sumaho.active-tab{
background: #68aa00;
transition: all 0.3s ease;
color:#FFF;
font-weight:700;
}
.melon-tabekurabe-sumaho.active-tab{
background: #7d990b;
transition: all 0.3s ease;
color:#FFF;
font-weight:700;
}
.melon-houdai-sumaho.active-tab{
background: #690;
transition: all 0.3s ease;
color:#FFF;
font-weight:700;
}
.derawea-sumaho.active-tab{
background: #bc2fea;
transition: all 0.3s ease;
color:#FFF;
font-weight:700;
}
.kyohou-sumaho.active-tab{
background: #4a2fea;
transition: all 0.3s ease;
color:#FFF;
font-weight:700;
}
.mikan-sumaho.active-tab{
background: #F93;
transition: all 0.3s ease;
color:#FFF;
font-weight:700;
}
.tokubetu-sumaho.active-tab{
background: #06F;
transition: all 0.3s ease;
color:#FFF;
font-weight:700;
}
/* サブメニュー色 いちご狩りセット*/
.sub-ichigo-sumaho{
background:#F6C;
padding-bottom:15px;
}
.sub-ichigo-sumaho li{
position: relative;
padding:20px;
width: 100%;
max-width:400px;
margin:0 auto;
padding-bottom:25px;
border-bottom:1px dotted #ffd7e4;
}
.sub-ichigo-sumaho li:last-child{
border:none;
}
.sub-ichigo-sumaho li a{
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
font-size:17px;
padding-top:13px;
max-width:400px;
font-weight:600;
background:#ffd7e4;
color:#d64c4c;
}
.sub-ichigo-sumaho li:first-child a{
border-radius:10px 10px 0 0;
}
.sub-ichigo-sumaho li:last-child a{
border-radius:0 0 10px 10px;
}
.sub-ichigo-sumaho li:nth-child(odd):hover a{
background:#ffb0e3;
color:#FFF;
}
.sub-ichigo-sumaho li:nth-child(even):hover a{
background:#f797ff;
color:#FFF;
}
/* サブメニュー色 メロン狩りセット*/
.sub-melon-sumaho{
background:yellowgreen;
padding-bottom:15px;
}
.sub-melon-sumaho li{
position: relative;
padding:20px;
width: 100%;
max-width:400px;
margin:0 auto;
padding-bottom:25px;
border-bottom:1px dotted #e0ffcc;
}
.sub-melon-sumaho li:last-child{
border:none;
}
.sub-melon-sumaho li a{
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
font-size:17px;
padding-top:13px;
max-width:400px;
font-weight:600;
background:#e0ffcc;
color:#3e8e2e;
}
.sub-melon-sumaho li:first-child a{
border-radius:10px 10px 0 0;
}
.sub-melon-sumaho li:last-child a{
border-radius:0 0 10px 10px;
}
.sub-melon-sumaho li:nth-child(odd):hover a{
background:#7ee880;
color:#FFF;
}
.sub-melon-sumaho li:nth-child(even):hover a{
background:#bfe87e;
color:#FFF;
}
/* サブメニュー色 メロン食べ比べセット*/
.sub-melon-tabekurabe-sumaho{
background:#4db54d;
padding-bottom:15px;
}
.sub-melon-tabekurabe-sumaho li{
position: relative;
padding:20px;
width: 100%;
max-width:400px;
margin:0 auto;
padding-bottom:25px;
border-bottom:1px dotted #cfffe6;
}
.sub-melon-tabekurabe-sumaho li:last-child{
border:none;
}
.sub-melon-tabekurabe-sumaho li a{
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
font-size:17px;
padding-top:13px;
max-width:400px;
font-weight:600;
background:#cfffe6;
color:#3e8e2e;
}
.sub-melon-tabekurabe-sumaho li:first-child a{
border-radius:10px 10px 0 0;
}
.sub-melon-tabekurabe-sumaho li:last-child a{
border-radius:0 0 10px 10px;
}
.sub-melon-tabekurabe-sumaho li:nth-child(odd):hover a{
background:#7ee880;
color:#FFF;
}
.sub-melon-tabekurabe-sumaho li:nth-child(even):hover a{
background:#bfe87e;
color:#FFF;
}
/* サブメニュー色 メロン食べ放題セット*/
.sub-melon-houdai-sumaho{
background:#8cb200;
padding-bottom:15px;
}
.sub-melon-houdai-sumaho li{
position: relative;
padding:20px;
width: 100%;
max-width:400px;
margin:0 auto;
padding-bottom:25px;
border-bottom:1px dotted #fdffcf;
}
.sub-melon-houdai-sumaho li:last-child{
border:none;
}
.sub-melon-houdai-sumaho li a{
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
font-size:17px;
padding-top:13px;
max-width:400px;
font-weight:600;
background:#fdffcf;
color:#3e8e2e;
}
.sub-melon-houdai-sumaho li:first-child a{
border-radius:10px 10px 0 0;
}
.sub-melon-houdai-sumaho li:last-child a{
border-radius:0 0 10px 10px;
}
.sub-melon-houdai-sumaho li:nth-child(odd):hover a{
background:#7ee880;
color:#FFF;
}
.sub-melon-houdai-sumaho li:nth-child(even):hover a{
background:#bfe87e;
color:#FFF;
}
/* サブメニュー色 デラウェア狩りセット*/
.sub-derawea-sumaho{
background:#be5de2;
padding-bottom:15px;
}
.sub-derawea-sumaho li{
position: relative;
padding:20px;
width: 100%;
max-width:400px;
margin:0 auto;
padding-bottom:25px;
border-bottom:1px dotted #eec0ff;
}
.sub-derawea-sumaho li:last-child{
border:none;
}
.sub-derawea-sumaho li a{
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
font-size:17px;
padding-top:13px;
max-width:400px;
font-weight:600;
background:#eec0ff;
color:#620087;
}
.sub-derawea-sumaho li:first-child a{
border-radius:10px 10px 0 0;
}
.sub-derawea-sumaho li:last-child a{
border-radius:0 0 10px 10px;
}
.sub-derawea-sumaho li:nth-child(odd):hover a{
background:#df88ff;
color:#FFF;
}
.sub-derawea-sumaho li:nth-child(even):hover a{
background:#afa9ff;
color:#FFF;
}
/* サブメニュー色 巨峰狩りセット*/
.sub-kyohou-sumaho{
background:#6a5aff;
padding-bottom:15px;
}
.sub-kyohou-sumaho li{
position: relative;
padding:20px;
width: 100%;
max-width:400px;
margin:0 auto;
padding-bottom:25px;
border-bottom:1px dotted #ccc2ff;
}
.sub-kyohou-sumaho li:last-child{
border:none;
}
.sub-kyohou-sumaho li a{
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
font-size:17px;
padding-top:13px;
max-width:400px;
font-weight:600;
background:#ccc2ff;
color:#620087;
}
.sub-kyohou-sumaho li:first-child a{
border-radius:10px 10px 0 0;
}
.sub-kyohou-sumaho li:last-child a{
border-radius:0 0 10px 10px;
}
.sub-kyohou-sumaho li:nth-child(odd):hover a{
background:#df88ff;
color:#FFF;
}
.sub-kyohou-sumaho li:nth-child(even):hover a{
background:#afa9ff;
color:#FFF;
}
/* サブメニュー色 みかん狩りセット*/
.sub-mikan-sumaho{
background:#ffab6c;
padding-bottom:15px;
}
.sub-mikan-sumaho li{
position: relative;
padding:20px;
width: 100%;
max-width:400px;
margin:0 auto;
padding-bottom:25px;
border-bottom:1px dotted #ffebca;
}
.sub-mikan-sumaho li:last-child{
border:none;
}
.sub-mikan-sumaho li a{
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
font-size:17px;
padding-top:13px;
max-width:400px;
font-weight:600;
background:#ffebca;
color:#af6c00;
}
.sub-mikan-sumaho li:first-child a{
border-radius:10px 10px 0 0;
}
.sub-mikan-sumaho li:last-child a{
border-radius:0 0 10px 10px;
}
.sub-mikan-sumaho li:nth-child(odd):hover a{
background:#eac324;
color:#FFF;
}
.sub-mikan-sumaho li:nth-child(even):hover a{
background:#ff9971;
color:#FFF;
}
/* サブメニュー色 特別セット*/
.sub-tokubetu-sumaho{
background:#5076ff;
padding-bottom:15px;
}
.sub-tokubetu-sumaho li{
position: relative;
padding:20px;
width: 100%;
max-width:400px;
margin:0 auto;
padding-bottom:25px;
border-bottom:1px dotted #aee0ff;
}
.sub-tokubetu-sumaho li:last-child{
border:none;
}
.sub-tokubetu-sumaho li a{
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
font-size:17px;
padding-top:13px;
max-width:400px;
font-weight:600;
background:#aee0ff;
color:#1f18aa;
}
.sub-tokubetu-sumaho li:first-child a{
border-radius:10px 10px 0 0;
}
.sub-tokubetu-sumaho li:last-child a{
border-radius:0 0 10px 10px;
}
.sub-tokubetu-sumaho li:nth-child(odd):hover a{
background:#92b4ff;
color:#FFF;
}
.sub-tokubetu-sumaho li:nth-child(even):hover a{
background:#35c1f9;
color:#FFF;
}
.accordion-toggle a.active:before {
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
background: #fff !important;
}
.accordion-toggle a.active:after {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
background: #fff !important;
opacity: 0;
}
.sumaho-menumenu{
background-color: #F63;
border-radius:20px;
width:100%;
max-width:85px;
padding:1px 0px;
box-shadow:2px 0 0 0 rgba(0,0,0,0.4);
}
.sumaho-menumenu-mozi{
margin-left:20px;
color:#FFF;
font-size:16px;
font-weight:700;
}
#menu-wrapperr {
overflow: hidden;
width: 100%;
max-width: 87px;
cursor: pointer;
}
#menu-wrapperr #hamburger-menu {
position: relative;
width: 15px;
height: 20px;
margin: 15px;
}
#menu-wrapperr #hamburger-menu span {
opacity: 1;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
left: 0;
display: block;
width: 100%;
height: 3px;
border-radius: 10px;
color: black;
background-color: white;
position: absolute;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .4s ease-in-out;
transition: .4s ease-in-out;
}
#menu-wrapperr #hamburger-menu span:nth-child(1) {
top: 0;
}
#menu-wrapperr #hamburger-menu span:nth-child(2) {
top: 9px;
}
#menu-wrapperr #hamburger-menu span:nth-child(3) {
top: 18px;
}
#menu-wrapperr #hamburger-menu.open span:nth-child(1) {
top: 9px;
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
}
#menu-wrapperr #hamburger-menu.open span:nth-child(2) {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
left: -60px;
}
#menu-wrapperr #hamburger-menu.open span:nth-child(3) {
top: 9px;
-webkit-transform: rotate(-135deg);
transform: rotate(-135deg);
}
/* スマホ イベントメニュー スクロールで追従 */
.fix-header-sumaho {
top: -66px;/* 上に隠す鷹さ */
width: 100%;
padding-top:0px;/*60px*/
position: fixed;
opacity:0;/* 最初読み込んだときは透過 */
z-index: 1000;/* 他のアイテムに対して最上位のレイヤーになるように ※翻訳機能より下に設定*/
/* opacity: 0; */
}
/*スマホ イベントメニュー スクロールで追従 翻訳押すとボタン位置変更*/
.translated-ltr .fix-header-sumaho {
margin-top:37px;
}
.topsumaho {
position: relative;
padding:30px;
}
.topsumaho a {
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
background:#666;
color:#FFF;
font-weight:600;
font-size:18px;
padding-top:20px;
}
.topsumaho a:active {
background:#111;
color:#FFF;
}
.yagaisumaho {
position: relative;
padding:30px;
}
.yagaisumaho a {
display:inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align:center;
background:#F69;
color:#FFF;
font-weight:600;
font-size:18px;
padding-top:18px;
}
.yagaisumaho a:active {
background:#C39;
color:#FFF;
}
.drawr3 {
display: none;
position: absolute;
left:0;
width:100%;
max-width:450px;
z-index: 100;
top: 98px;
}
.drawr3 ul ul li {
width:90%;
}
/* スマホの時だけ特定の場所が消える */
@media screen and (max-width: 380px) {
.drawr3 ul li i {
display:none;
}
}
.bbbuton{
display:block;
position: absolute;
background: #666;
width:63px;
height:77px;
padding:13px 10px 5px 10px;
border-radius: 6px;
opacity:0.9;
top:25px;
}
.button2 {
position: absolute;
width:100%;
max-width: 40px;
height: 34px;
z-index: 100;
margin-bottom:20px;
cursor: pointer;
cursor: hand;
top:11px;
}
/* 文字 */
.button2::after {
position: absolute;
left: -1.9px;
bottom: -26px;
content: 'MENU';
width: 100%;
color: #fff;
font-size: 16px;
text-decoration: none;
text-align: center;
white-space: nowrap;
transition: all .4s;
}
.button2.active::after {
content: 'CLOSE';
bottom: -28px;
left: -2.5px;
}
.button2 span {
transition: all .4s;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: #FFF;
border-radius: 4px;
}
.button2 span:nth-of-type(1) {
top: 0;
}
.button2 span:nth-of-type(2) {
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.button2 span:nth-of-type(3) {
bottom: 0;
}
.button2.active span:nth-of-type(1) {
-webkit-transform: translateY(15px) rotate(-315deg) scale(.8);
transform: translateY(15px) rotate(-315deg) scale(.8);
}
.button2.active span:nth-of-type(2) {
width: 50px;
height: 50px;
background-color: transparent;
border: 3px solid #fff;
border-radius: 50%;
}
.button2.active span:nth-of-type(3) {
-webkit-transform: translateY(-15px) rotate(315deg) scale(.8);
transform: translateY(-15px) rotate(315deg) scale(.8);
}
.button2 .close {
letter-spacing: 0.08em;
margin-top:45px;
}
.button2 .menu {
margin-top:45px;
}
.button2.active .menu {
display: none;
}
.button2.active .close {
display: block;
}
/* どこでも使用可 小窓アニメ(毎日更新写真ギャラリー)*/
.swiper-parent {
position: relative;
max-width: 360px;
height:366px;
padding:5px;
background: rgba(219,67,0,0.25);
border-radius:10px;
}
#slide {
padding: 0;
max-width: 360px;
margin: 0px auto;
text-align: center;
height: 300px;
position: absolute;
top:10px;
right:0px;
width: 100%;
}
#slide img {
width: 100%;
max-width: 330px;
padding:10px 8px 19px 8px;
background: #FFF;
}
.swiper-pagination{
position: absolute;
top:66%;
}
/* 前・次スライドボタンの縦位置調整（スライドの高さの中央に合わせる） */
.swiper-button-prev, .swiper-button-next {
top: calc((100% - 200px) * 1.5); /* ☆★ページネーション・スクロールバー（50px）を除く縦位置の中央（＝スライドの高さの中央）に一旦配置 */
margin-left: -22px; /* ★ボタンの高さ（44px）の半分のネガティブマージンで上に少しずらす */
}
/* みかん */
.arrow04 {
position: relative;
content: '';
width: 50px;
height: 50px;
background: #ff9b0b;
border-radius: 50%;
}
.arrow04::after {
position: absolute;
content: '';
width: 0;
height: 0;
border: solid 14px transparent;
border-left: solid 16px #fff;
top: 40%;
left: 20px;
margin-top: -8px;
}
.arrow05 {
position: relative;
content: '';
width: 50px;
height: 50px;
background: #ff9b0b;
border-radius: 50%;
}
.arrow05::after {
position: absolute;
content: '';
width: 0;
height: 0;
border: solid 14px transparent;
border-right: solid 16px #fff;
top: 40%;
right: 20px;
margin-top: -8px;
}
.sample_box2_4 {
background-color: #fff4ea;/*背景色*/
box-shadow: 0 0 0 8px #fff4ea;/*背景色外側*/
border: 2px dotted #ffbf7f;/*線*/
border-radius: 8px;/*角の丸み*/
color: #000000;/*文字色*/
width:100%;
max-width:313px;
height:80px;
position: absolute;
top:72%;
left:6.4%;
}
.sample_box2_4 p{
padding:0;
margin:0;
position: absolute;
top:30%;
}
/* いちご */
.arrow06 {
position: relative;
content: '';
width: 50px;
height: 50px;
background: #ff7a88;
border-radius: 50%;
}
.arrow06::after {
position: absolute;
content: '';
width: 0;
height: 0;
border: solid 14px transparent;
border-left: solid 16px #fff;
top: 40%;
left: 20px;
margin-top: -8px;
}
.arrow07 {
position: relative;
content: '';
width: 50px;
height: 50px;
background: #ff7a88;
border-radius: 50%;
}
.arrow07::after {
position: absolute;
content: '';
width: 0;
height: 0;
border: solid 14px transparent;
border-right: solid 16px #fff;
top: 40%;
right: 20px;
margin-top: -8px;
}
.sample_box2_5 {
background-color: #fff4ea;/*背景色*/
box-shadow: 0 0 0 8px #fff4ea;/*背景色外側*/
border: 2px dotted #ff8e7f;/*線*/
border-radius: 8px;/*角の丸み*/
color: #000000;/*文字色*/
width:100%;
max-width:313px;
height:80px;
position: absolute;
top:72%;
left:6.4%;
}
.sample_box2_5 p{
padding:0;
margin:0;
position: absolute;
top:30%;
}
.sa--scaleUp {
transform: scale(.5);
}
/* どこでも使用可 小窓アニメ(毎日更新写真ギャラリー)*/
*:focus {
outline: none;
}
/* TOPの近況農園画像設定 */
.swiper-midashi{
text-align:center;
}
/* TOPの近況農園画像追加時の動画設定 */
.movie-wrap2 {
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.movie-wrap2 iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media screen and (min-width: 960px) {
.movie-wrap2 {
width:100%;
padding-bottom: 56.25%;
height:0px;
position: relative;
}
.movie-wrap2 iframe {
position: absolute;
top: 0;
left: 0;
width: 90%;
height: 90%;
margin-left:30px;
}
}
@media screen and (max-width: 1100px) {
/*浜焼き スイーツ告知 1100の時 */
.tbl-r01{
width:80%;
}
.tbl-r01 th,
.tbl-r01 td {
border-bottom: none;
display: block;
width: 100%;
}
.tbl-r01 td img {
width: 100%;
}
}
@media screen and (max-width: 800px) {
/*浜焼き スイーツ告知 800の時*/
.tbl-r01{
width:100%;
}
.tbl-r01 th,
.tbl-r01 td {
border-bottom: none;
display: block;
width: 100%;
}
.tbl-r01 td img {
width: 100%;
}
}
@media screen and (max-width: 1440px) {
/* TOPの近況農園画像のテーブル設定 */
.tbl-r02 th,
.tbl-r02 td {
border-bottom: none;
display: block;
width: 100%;
}
.swiper-midashi{
margin:0 auto;
text-align:center;
}
}
/* eventとmenu BBQ(３列並び設定※ヘルシーチキン追加) */
.tbl-r03{
width: 70%;
}
@media screen and (max-width: 1140px) {
/* eventとmenu BBQ(３列並び設定※ヘルシーチキン追加) */
.tbl-r03{
width: 90%;
}
.tbl-r03 th,
.tbl-r03 td {
border-bottom: none;
display: block;
width: 100%;
}
}
/* みかん狩り 宝探し プレゼントカード並び */
.tbl-r04{
width:100%;
max-width: 500px;
margin:0 auto;
}
@media screen and (max-width: 840px) {
.tbl-r04{
width: 90%;
}
}
@media screen and (min-width: 1301px) {
.box11-top{
margin-top:30px;
}
}
.kokuchi-dai{
max-width:1050px;
}
.tokutoku-kokuchi{
max-width:650px;
}
.tokutoku-kokuchi-img{
max-width:400px;
}
@media screen and (max-width: 1200px) {
/* TOPの近況農園画像のテーブル設定 */
.tbl-r05 th,
.tbl-r05 td {
border-bottom: none;
display: block;
width: 100%;
}
.kokuchi-dai{
max-width:500px;
}
.top-kokuti{
margin-bottom:30px;
}
.tokutoku-kokuchi{
margin-bottom:30px;
max-width:400px;
}
.tokutoku-kokuchi-img{
max-width:550px;
text-align:center;
}
}
.kannai-annai-kokuchi{
width:100%;
max-width:1100px;
}
@media screen and (max-width: 1200px) {
/* いちご狩り館内利用券 果物ページの告知設定 */
.kannai-annai-kokuchi{
width: 100%;
max-width:700px;
}
.tbl-r06 th,
.tbl-r06 td {
border-bottom: none;
display: block;
width: 100%;
}
.tbl-r06 td img {
width: 100%;
max-width:500px;
}
}
.tbl-r07{
width:90%;
}
@media screen and (max-width: 1200px) {
/*果物ページ いちごweb予約説明 */
.tbl-r07{
width:100%;
}
.tbl-r07 th,
.tbl-r07 td {
border-bottom: none;
display: block;
width: 100%;
}
.tbl-r07 td img {
width: 100%;
max-width:500px;
}
}
/*果物ページ みかん狩り1月の時の料金表 */
.fruit-t{
width: 50%;
}
@media screen and (max-width: 1200px) {
/*果物ページ みかん狩り1月の時の料金表 */
.sample_box3_2 {
background: #fff2e4;/*背景色*/
color: #000000;/*文字色*/
border:2px solid #ff9b38;
width:90%;
}
.fruit-t{
width: 90%;
}
}
@media screen and (min-width: 1201px) {
.tbl-r08{
width:100%;
margin-bottom:20px;
}
.photo_1 {
margin-right:20px;
}
.photo_2 {
margin-right:-20px;
}
.tbl-r08 td img {
width: 100%;
max-width:600px;
}
}
@media screen and (max-width: 1200px) {
/*果物ページ いちごweb予約説明 */
.tbl-r08{
width:100%;
}
.tbl-r08 td {
border-bottom: none;
display: block;
width: 100%;
margin-bottom:20px;
}
.tbl-r08 td img {
width: 100%;
max-width:600px;
}
}
.tbl-r09{
width:90%;
}
@media screen and (max-width: 1200px) {
/*果物ページ いちごweb予約説明 */
.tbl-r09{
width:100%;
}
.tbl-r09 th,
.tbl-r09 td {
border-bottom: none;
display: block;
width: 100%;
}
.tbl-r09 td img {
max-width:300px;
}
.wakunowaku{
width:100%;
max-width:500px;
margin:0 auto;
}
}
.tbl-r10{
width:100%;
}
@media screen and (max-width: 400px) {
/*汎用型 とにかく横並びにしたい場合 */
.tbl-r10{
width:100%;
}
.tbl-r10 th,
.tbl-r10 td {
border-bottom: none;
display: block;
width: 100%;
}
.tbl-r10-2{
text-align:center;
}
}
.tbl-r11{
width:100%;
}
@media screen and (max-width: 600px) {
/*汎用型 とにかく横並びにしたい場合 */
.tbl-r11{
width:100%;
}
.tbl-r11 th,
.tbl-r11 td {
border-bottom: none;
display: block;
width: 100%;
}
}
/*テーブル横並び設定*/
.aiaiai td{
padding:10px;
}
@media screen and (max-width: 1200px) {
.tbl-aiaiai {
display: block;
margin:0 auto;
width:100%;
max-width:800px;
}
}
/* 小窓アニメ(毎日更新写真ギャラリー) リンクボタン*/
.btn-open-pn-green {
display: inline-block;
width:100%;
max-width: 360px;
height:38px;
text-align: center;
background-color: #9ec34b;
font-size: 16px;
line-height: 34px;
color: #FFF;
text-decoration: none;
font-weight: bold;
border: 2px solid #9ec34b;
position: relative;
overflow: hidden;
z-index: 1;
padding:0 20px;
position: absolute;
top:-36px;
right:0px;
}
.btn-open-pn-green:after{
width: 100%;
height: 0;
content:"";
position: absolute;
top: 50%;
left: 50%;
background : #FFF;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: .2s;
z-index: -1;
}
.btn-open-pn-green:hover{
color: #9ec34b;
}
.btn-open-pn-green:hover:after{
height: 440%;
opacity: 1;
}
.btn-open-pn-green:active:after{
height: 540%;
opacity: 1;
}
/* 小窓アニメ(毎日更新写真ギャラリー) リンクボタン*/
.btn-open-pn-pink {
display: inline-block;
width:100%;
max-width: 360px;
height:38px;
text-align: center;
background-color: #ff6a66;
font-size: 16px;
line-height: 34px;
color: #FFF;
text-decoration: none;
font-weight: bold;
border: 2px solid #ff6a66;
position: relative;
overflow: hidden;
z-index: 1;
padding:0 20px;
position: absolute;
top:-36px;
right:0px;
}
.btn-open-pn-pink:after{
width: 100%;
height: 0;
content:"";
position: absolute;
top: 50%;
left: 50%;
background : #FFF;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: .2s;
z-index: -1;
}
.btn-open-pn-pink:hover{
color: #ff6a66;
}
.btn-open-pn-pink:hover:after{
height: 440%;
opacity: 1;
}
.btn-open-pn-pink:active:after{
height: 540%;
opacity: 1;
}
/* 小窓アニメ(毎日更新写真ギャラリー) リンクボタン*/
.btn-open-pn-orange {
display: inline-block;
width:100%;
max-width: 360px;
height:38px;
text-align: center;
background-color: #ff8327;
font-size: 16px;
line-height: 34px;
color: #FFF;
text-decoration: none;
font-weight: bold;
border: 2px solid #ff8327;
position: relative;
overflow: hidden;
z-index: 1;
padding:0 20px;
position: absolute;
top:-36px;
right:0px;
}
.btn-open-pn-orange:after{
width: 100%;
height: 0;
content:"";
position: absolute;
top: 50%;
left: 50%;
background : #FFF;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: .2s;
z-index: -1;
}
.btn-open-pn-orange:hover{
color: #ff8327;
}
.btn-open-pn-orange:hover:after{
height: 440%;
opacity: 1;
}
.btn-open-pn-orange:active:after{
height: 540%;
opacity: 1;
}
/* 小窓アニメ(毎日更新写真ギャラリー) リンクボタン*/
.btn-open-pn-purple {
display: inline-block;
width:100%;
max-width: 360px;
height:38px;
text-align: center;
background-color: #a61dff;
font-size: 16px;
line-height: 34px;
color: #FFF;
text-decoration: none;
font-weight: bold;
border: 2px solid #a61dff;
position: relative;
overflow: hidden;
z-index: 1;
padding:0 20px;
position: absolute;
top:-36px;
right:0px;
}
.btn-open-pn-purple:after{
width: 100%;
height: 0;
content:"";
position: absolute;
top: 50%;
left: 50%;
background : #FFF;
opacity: 0;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transition: .2s;
z-index: -1;
}
.btn-open-pn-purple:hover{
color: #a61dff;
}
.btn-open-pn-purple:hover:after{
height: 440%;
opacity: 1;
}
.btn-open-pn-purple:active:after{
height: 540%;
opacity: 1;
}
/* 果物狩りページのギャラリー設定 上のスライダー画像*/
.concontainer {
width:100%;
max-width: 700px;
padding: 10px;
margin: 0px auto;
}
.gallery img {
width: 100%;
height: auto;
}
.swiper-parent2 {
position: relative;
max-width: 700px;
margin:0 auto;
}
.swiper-parent2 .swiper-button-prev{
background-image: none;
left:10%;
}
.swiper-parent2 .swiper-button-next{
background-image: none;
left:89%;
}
/* 果物狩りページのギャラリー設定 画像拡大(マウスオーバー効果が出ないように設定)*/
.imgimg a:hover img{
opacity:1;
filter:alpha(opacity=100);
-ms-filter: "alpha( opacity=100 )";
}
@media screen and (max-width: 960px) {
.concontainer {
width:100%;
max-width: 500px;
padding: 10px;
margin: 0px auto;
}
.swiper-parent2 {
position: relative;
max-width: 500px;
margin:0 auto;
}
.swiper-parent2 .swiper-button-prev{
background-image: none;
left:3%;
}
.swiper-parent2 .swiper-button-next{
background-image: none;
left:96%;
}
}
/* 果物狩りページのギャラリー設定 下のスライダー画像*/
/* thumbs */
.gallery-thumbs .swiper-slide {
width: auto;
border-radius: 10px;
opacity: 0.8;
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
margin-top:10px;
}
.gallery-thumbs .swiper-slide-active {
opacity: 1;
-webkit-filter: initial; /* Safari 6.0 - 9.0 */
filter: initial;
font-weight: bold;
color: #231b93;
}
.thumds-box{
width:100%;
max-width:600px;
margin:0 auto;
}
.gallery-thumbs img {
cursor: pointer;
width: 120px;
height: 100px;
border-radius: 30px;
object-fit: contain;
}
/* 果物狩りページのギャラリー設定 画像上の文字設定 */
.s-right-wrap {
position: relative;
max-width: 640px;
margin: 0 auto;
}
@media screen and (max-width: 700px) {
/* リンク無効 */
.s-right-wrap a {
pointer-events: none;
}
}
.s-right-text {
position: absolute;
background: rgba(255,113,26,0.8);
top: 85%;
left: 0;
width: 100%;
text-align: center;
color: white;
font-size:26px;
font-weight:bold;
padding:3px;
}
@media screen and (max-width: 360px) {
.s-right-text {
font-size:6vw;
}
}
.swiper-slide-active .s-right-text {
animation: slideFromRight 1.5s ease 0s 1 normal;
}
@keyframes slideFromRight {
0%, 25% {
transform: translateX(50px);
opacity: 0;
}
100% {
transform: translateX(0px);
opacity: 1;
}
}
/* 果物狩りページのギャラリー設定 IE時限定設定 (スライダーバグのためサイズ固定 + 矢印位置調整 )*/
/* サイズ固定*/
_:-ms-lang(x)::-ms-backdrop,
.gallery img {
width: 100%;
max-width:500px;
height: auto;
overflow: hidden;
border-radius:10px;
}
_:-ms-lang(x)::-ms-backdrop,
.concontainer {
width:100%;
max-width: 500px;
padding: 10px;
margin: 0px auto;
}
/* 矢印位置調整*/
_:-ms-lang(x)::-ms-backdrop,
.swiper-parent2 .swiper-button-prev{
background-image: none;
left:0%;
}
_:-ms-lang(x)::-ms-backdrop,
.swiper-parent2 .swiper-button-next{
background-image: none;
left:100%;
}
@media screen and (max-width: 960px) {
_:-ms-lang(x)::-ms-backdrop,
.swiper-parent2 .swiper-button-prev{
background-image: none;
left:3%;
}
_:-ms-lang(x)::-ms-backdrop,
.swiper-parent2 .swiper-button-next{
background-image: none;
left:95%;
}
}
/* 果物狩りページのギャラリー設定 chrome safari opera設定 (IE以外すべて画像ズームできるように設定)*/
/* chrome safari opera */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
animation: zoomUp 10s linear 0s 1 normal both;
}
.swiper-zoom-container{
width:100%;
max-width:700px;
overflow: hidden;
border-radius:15px;
}
.slide-img img{
display: block;
}
}
/* 果物狩りページのギャラリー設定 Firefox設定 (IE以外すべて画像ズームできるように設定)*/
/* Firefox */
@-moz-document url-prefix() {
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
animation: zoomUp 10s linear 0s 1 normal both;
}
.swiper-zoom-container{
width:100%;
max-width:700px;
overflow: hidden;
}
.slide-img img{
display: block;
}
}
/* 果物狩りページのギャラリー設定 Edge設定 (IE以外すべて画像ズームできるように設定)*/
/* Edge */
@supports (-ms-ime-align: auto) {
@keyframes zoomUp {
0% {
transform: scale(1);
}
100% {
transform: scale(1.15);
}
}
.swiper-slide-active .slide-img,
.swiper-slide-duplicate-active .slide-img,
.swiper-slide-prev .slide-img{
animation: zoomUp 10s linear 0s 1 normal both;
}
.swiper-zoom-container{
width:100%;
max-width:700px;
overflow: hidden;
}
.slide-img img{
display: block;
}
}
/* 画像の上のキラキラアニメーション */
.starshine {
z-index: 1;
overflow: hidden;
}
.shine {
display: block;
position: absolute;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAlgAAAJYCAMAAACJuGjuAAADAFBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+/LkhhAAAA/3RSTlMAAQIDBAUGBwgJCgsMDQ4PEBESExQVFhcYGRobHB0eHyAhIiMkJSYnKCkqKywtLi8wMTIzNDU2Nzg5Ojs8PT4/QEFCQ0RFRkdISUpLTE1OT1BRUlNUVVZXWFlaW1xdXl9gYWJjZGVmZ2hpamtsbW5vcHFyc3R1dnd4eXp7fH1+f4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5ebn6Onq6+zt7u/w8fLz9PX29/j5+vv8/f7rCNk1AAAbWElEQVR4AezcS8uU9QOHcf3/ayFWYyHixlnYAREHa9GhGCSxFjIgFthhxI1Y+RRibmwQEcRirIWIiynosBAHsRYiDG7sEMxGnoXII+LGgqmFWIueQNyIXcHNj3sffO/d9XkJ1wu4lvwXesQETdBqE6gJHROoCS+bQE3omUBNeM8EasKHJlAThiZogr4wQRM0NkET9LMJmqB5EzRBMxM0QX+boAliiZT3EA8bQXmP8pgRlNembQTlPclTRlBeh44RlPciLxlBeZvYZATl9egZQXmv8boRlNenbwTlvcO7RlDe+3xgBOUNGBhBeUc4YgTlDRkaQXmnOGUE5Y343AjKGzM2gvK+5TsjKG/CxAjK+5GfjKC8KVMjKG+BBSMo7wY3jKC8GTMjKO8P/jSC8hZZNILy/gEjKO4B4EEzKK0FtMygtNXAajMorQ1eQZS3AdhgBqU9DTxjBqV1ga4ZlPYK8KoZlNYDryDKewt42wxK2wXsMoPS5oA5MyjtAHDADEobgFcQ5X0MfGIGpX0KfGYGpY2AkRmU9jXwjRmUNgavIMq7AFwwg9IuAhfNoLQpOG9Q3jwwbwalLYBXEOX9AvxqBqX9BvxuBqUtgvMG5d0F7ppBaQCYQWHLAVhuCGWtAGCFIZTVBucNynscgCcMoawOAB1DKOt5AF4whLK64BVEeT1w3qC87QBsN4Sy+gD0DaGsPQDsMYSy5sAriPI+AucNyjsMwGFDKGsIwNAQyjoJwElDKGsEXkGUdwaAM4ZQ1jkAzhlCWRMAJoZQ1vcA/GAIZU3BK4jyrgJw1RDKug7AdUMoawbAzBDKug3AbUNkaRHyVxDpPgD3DRGl/0Hl/6ZIUgsqLVMkaRVUVpkiSW3IX0Gk9VBZb4okbYTKRlMkqQv5eYO0BSpbTJGkHuSvINIbUHnTFEnaCZWdpkjSHOTnDdJ+qOw3RZIGkL+CSMegcswUSToOleOmSNII8vMG6UuofGWKJI2hMjZFks5D5bwpkjSB/BVEmkJ+3iBdhsplUyRpASoLpkjSTajcNEWSZpC/gkh/QX7eIN2Byh1TJAkKUwRpGRTLjJGjFuSvINIaKNYYI0droVhrjBx1oOgYI0fPQvGcMXLUhfwVRNoKxVZj5GgbFNuMkaM+FH1j5Gg3FLuNkaM5yF9BpINQHDRGjg5BccgYORpCMTRGjk5AccIYORpB/goinYbitDFydBaKs8bI0QTy8wbpEhSXjJGjKeSvINIVKK4YI0fXoLhmjBzNID9vkG5BccsYOVqE/BVEugfFPWPEaCnUlpojRS3IzxuklVBbaY4UtaHWNkeK1kFtnTlS1IH8FUTqQn7eIG2G2mZzpKgHtZ45UrQDajvMkaI+5K8g0l6o7TVHivZBbZ85UjSA2sAcKToKtaPmUP4J8i979/7fVGH/cfwdAgXKpQRE7YCCGYJOqpOgKGNeWAQVZE6MDxQFnC7aydTxZaa4L2MyB5kXp2NWog8Fpx0zXlCUL2oEQRBRgkrVDcHIfShCLJQLxZL3t1ww55yENpdzTnP5PP+G/tDzOvm8j6yCCB09yqhHkYtEIZrA44x6HKZr1hPCaMWnw3yVjKqE2VoOt0AY7vzLYLqXGPUiTGb7QwGECUbe2oSbIOavgnSbXQRhivKpFphrMaMWw1RnLu8KYZKKfxTAVMsYtQxmGrSxFMIs1lcC7WCmKkZVwUSjagZBmKdw+cfFMNEaRq2BeTwHR8FMovPa9T8yfxPE5FUQ63SWw1yi57bwT2GaMKPCMEnrl1gBs4n+e/ZdDbPUMGoXzNHxXb5ihenE8LqDd8AkVIIpTlnN5YVoAuKGCB+0wAwtqdQSJui7lWs7o0mIcvJfLc3eBDFnFWRIDbf1RBMRFeTbHWC8LlTqAsPdeIB7+kM0XSglP+kGw/WgUg8YbVKEB4ajKUkoJTeXmjndYMJ4g/VxMjIKTUtCKVl9MQzWj0r9YKg2r8rFRkaEUrL2WrM2QUxYBTnxfVLCaEaEUjLyOxjqUioNgYF6riUljGZIKCX5NysMNIxKw2Ccc7eREkYzRBnrvdjK8OkGE8YbrthNShjNrKu/pR1hmLFUGgujuOtICaOZw/Is6/2nB4xSRqUyGMMyhaSE0UxSsID1tp4Ng0yg0gQYosVM1qsbDpE5iqpYb9dgGGMiafgqSLvXeUgZRCbpuon1DowxcrrB0PGGk1fKMERGOm0b60X+F0Z4kEoPQH+91/GQZy0QGRhK682wQn8VVKqA7n6yg4csKEBmklBKzm0D3c2i0izo7aq9PKSqCJlKQim5vLMRmyBGroKMq+MhG7pCZPI82tofGjDdYNx4g+UvJDM/jEooJb8+B/p6g0pvQE8FlWRWhFEJpeTuodDVEiotgY6KFpBZEkYllJJ1N0NPK6kUhH66rCKzJoxKKK13j0XfTRBjVkH6bMySxVxRWs0jnmpuzHQDuR56uShMZkkYFYNqecT8ttDLFiptgU6u2U9mTRgVoyI8IngydFJNpWro47cRMhvDqHyf5Mte0EctlWqhh2YP86hNXZEVRAWP2j4AuqAadNDKz6OqS5E15ED6qL1XQgftqdYeabMt5lG1g5AtROFCHlV3G9LXiWodka7un/GwLD15llBab5oF6SqhWgnSdNaWbP9InYRS8pkCpKk31XohPc6dPKYCWUpCKflWe103QdJeBbm+lse8ZEW2klBKrvoB0jKAagOQjokRUsJoLoRScsMZSMeFVLsQqbM+SlLCaG6EUjJ8AdIwlGpDkbLWc0gJozkTSsn9LqRuBNVGIFWd3iMljOZQKCUP3pn+JkjaqyD2z0kJo7mxJBn1UDOk6BaquZGafltJCaO5siQZ9VxLpGYc1VKs+ZfWkBJGc2dJMmqRLfWngPTHG375HSlhNJcOpKM+7YZUTKbaZKRgcoRRObEFKQfSUZvPTGcTJI1VkOZPUEG2IHNBGRV2DkLyplNtOpLVZh4VZAsyN/yBCrWjkLQZVJuBJJ30ARXk5DlXVFAh4klzuiH58YZTv6CCnDznVChVmG5Fcl6g2vNISv9tVJCT51wNpeRLrZPeBEljFWT4HipE3MhREkrJdzsiGYuo9jaScGsdmR9hVEIpufoUJGEp1ZYiYZZ7qVKBHCahlNzaN7nphhTHG1o8TTJ/wqiEUrJmCBK2mmqrkaB2b5ISRnNdGVUOjE1xE4TcgMQUf0hKGM1906gSmYQEbafadiTk9HVk3oRRWZJUeNyKhOykWjUSMXAHmUdhVJYkFV5tg0RQCwkYsY/MqzAqB9IK75+IxhVQqwUadXsd1cqQ6+RAWmFtTzSqiFpFaITlfmpMQ+6TA2mFbeeiMcXUKkbDCmZTQ7Ygc90Fe6i2e1iymyCNroJ0WEiNvDt5llBK1rmTnG5obLyhaxU15OQ5H5RRa4oFDelLrb5oQJ9N1JCT5/wwjVozW6ABA6k1EMd38bfU2F6KvCShlHy9HY5vMLUuwXGN3E9KGJVQeszKkxPcBGlkFWRChJQwKqE0al3vhKcbyGsRX7NHqCRhVEIpuWMAjmM0tUYjrlYvkBJGJZRq7L0q4cfIMsTT8R1SwqgsSVKrbhziGk+t8Yij+79JCaNiVIQx/mJBHOXUKkesH/+X9SSMinLGerYAsaZSaypiXLKLh0kYFRWMtaAIMe6n1n3QGn2AWrIFKQfSCqu6JPAHWAGNuyNUky1IOZDW2HgGNGZS6ymoWB+jgmxBis6fMlb4okY2QbSrIIUvM45yCAmlKvuvgcpcas2FwgnLGUcFhIRSjchvoTSfWvMRZV9DLTl5VpJQqvDXZohaQq0l+N45XzGOJYUQEkrj8LfC91ZQ6wMcc/luUsJooiSUkottsZsgsasgN31HShhNnIRS8rMSHLWOWl/iiD9SS8KoloRSrS1n4YjN1NqEQ5o/yVgSRrUklGrtdOKwampVo17b/yMljCZCliQ1aq/HIfuotQ/ASStICaOJkSVJjUg56jEW0CtEShhNmCxJajxqRVvGanvedlLCaOLkQFprTmsbY43Zy7hkC1JolTG+ZWczYbIFGUtMY3xbmRDZgoxPWGYyPXLy3DgJpY2Tk+f0SChNUBkaJySUJmsKRJIklGpJGE2fhFItCaP6kVCqIWE0DRJKJYyaQEKphNE0yZKkhFHjyJKkhFETyJKkhFGRpja2EvsVe5iwBT9znG0vsbWByHvNbSfaT3cMdA533eie4Jnq9T3hfzGwKFgV2hLez5TtD28JVQUXBV70P+HzTvVMcN/oGu4c6DjdfpKtOXKFaGfrYXf0cw5xXece55nsfcT3rH9+4P3gF1+Gq9kEqsNffhF8PzDf/6zvEe9kzzj3da4hzn4Oew9bO4gMU2Artp/huMB5pesm910e732+J/1zAu8EPw1tDR9gFjkQ3hr6LPhOYI7/Sd99Xs9d7ptcVzovcJxhL7YVQBijyGbv6TjXeZnrevftnnu8033/9L8RWLEytD68i3lhV3h9aOWKwBv+f/r+7r3Hc7v7etdlznMdPe22IogGtbJ1sZc6LnJe5frVLZ6J3gd8M/2vBJYG/xP6OlxH0YC68Neh/wSXBl7xz/Q94J3oueVXrhHOixyl9i62VsgPtk72Xo7znENdo913ev7krfD9yx94K/hRaGN4N4Uhdoc3hj4KvhXw/8tX4f2T5073aNdQ53mOXvZONmSVQls3+1mOQU7XNe4yz++9D/me9r8aWBb8PPRNOEKRUSLhb0KfB5cFXvU/7XvI+3tPmfsal3OQ4yx7N1shmoDV1tl+mmOA8wrXWPd4z5+9M3z+FwILg6tCm8N7KXLE3vDm0KrgwsALft8M7589491jXVc4BzhOs3e2WZG6trbu9rMdzsGuke7bPJO8D/ue8c8LLA+uDe34lnlPfLsjtDa4PDDP/4zvYe8kz23uka7BzvpC3N3WFhodOjvOd43x3Ot7LvBRqIYpEqIm9FHgOd+fPWNc5yNWe9spdsc5h8Pib+rD4t98lfVh8YNDYXEn857YeSj0flAfeit9f6sPvb85HHrPcdhPsbVP61XISYdfhfz88KuQacdehXyifRUiso321dQnx15NTTv8aurnzoGOHzXVq6m2thL72Y6fXeIa6f61Z5L3r75/+OcF3guuCe0IU2SY8I7QmuB7gXn+fxz+V+nX7pGuS468TG+LbNLMdoK9t2OAc5hrjHu8517vY77nng8sDH4c2hTeQ2GIveFNoY+DCwPPP+d7zHuvZ7x7jGuYc4Cjt/0EWzPkhda2rvYzHRc7r3a5b/Xc7X3QN8s/N/BucHVoW/ggRQMOhreFVgffDcz1z/I96L3bc6vbdbXzYseZ9q621hAN6tDRfqqjv/Ny1/XuOzxTvH/3zfa/GQh+GFofrmFeqAmvD30YDLzpn+37u3eK5w73Da7Lnf0dp9o7doAwRktbsb2P40LnL1w3u+8q997ve9L/cuCd4Gehr7Lt1w1fHf51w8v+J333e8vvct/s+oXzQkcfe7GtJUSGMT+bmP6Ybj5hfjaJ/5guvyAV0WziqmNS1vY34jFdyDDIsxYIA8iU0TQII8j4WhlEw2QuUmYihQEqZNhWGGAqNWRxxgSyjSUbWSaQNT9Z9UuD7I/KDqnZJIxqPWFBgoSE0bo5EkqF/mF078+HMtZ2CaUirTD6zXm4gLEGz5FQKtIIo6FewPmMdZ710cZDqRDljGvFSQBKGasUmBhpJJQKMSrCeOa1Rb1TGasngBtqJZSKBg2qZTxPNschJYxVgnrOnRJKRQNKqxnPH3GEjbFsOOSsLccNpUJ03cQ4vrsJR7VlrLY4rPtn8om5pMjXAmoux/cYC0fZFjOecuQ7UbiMcXx1DqL2U2sfjmnlZxyRURASRmOtsUOhmlrV+F6zhxlH7SBoCQmjy0+A0mZqbYLC+AhjVZdCTUgYfbkQKuuo9SWUrtnPWJu6QkgYVXrMCrUqalVB5aIwY1VJKJUwqhC5G1orqLUCan02SigVDYbR2tGIsYRaS6DRZZWEUtFAGN11CWLNp9Z8aBUtOG4oFRJG//tjxPEqteYiRkHlcUKpkA8//7s74qmkViViWe6LG0qFfKr+nY6Iaya1nkI84+ryPpSKaYzxQquEI2oF4rpqr4RSLTl5fqQZjuN+at2H+H6yQ0Kpipw8R/4nmUGHqTiO3uuoVVWEvCUnz/tH4vjKk3jaO3kltRYUIC+I0h3U+PZiNGA8tcbjuNq9LkuSR0kY3dQHDSlL6i61xSw5kD5MwmhVVzRoDLVGowGWKXIgXU/C6MIOaNh11LoWDXLXyYG0hNHZBWjEUGoNRcOu2E21PT9FfpEwer8FjRlMrUvQiHO35XUolTBadzsaN5BaA9GYnmvzOJRKGN03AgnoS62+aNSJ7+dtKJUwumMgElFKrVI0rs1reRpKZQty3elISAm1SpAA6+N5GUplC/LDYiTmB9QqRkImRfIvlMoW5JvtkKAiahUhMTceyLdQKifPT7dAogqo1QIJGlKTX6FUTp7vtSBx1ELC+m6VJck8OnmuuxXJ2Em1aiTulNWyJJnD3BEq7BmOpGyn2nYkodO7siSZJ2F0W38kZwPVNiAZrV+SA+m8CKNfnIokrabaaiTFOl0OpPMgjH5wEpJVRbUqJMkTkQPpXA+j89ogaUupthTJGlVLhckQuRZGn2iO5C2i2ttI2qCdORxKJYxGJiMVr1HtNSTvzM05G0oljH73S6TkBao9jxSUfJqjoVTCaM1lSE0l1SqRCtuinAylsgW5tR9SNINqM5CSls/lYCiVLcjP7UjVdKpNR2qaPZRzoVS2IN/rhJRN0+0A9c6DuRVK5eR5TmukbjJJnTqUa38uhVI5eX7UijSU67gAeUFYliRz5uQ5MhFpGUe125CGMzbIkmQ2s0bjU+0NSM8tVHMjHT9YJUuSORFGdzqRpuuodh3S0v4tOZDOgTC65SykawTVRiA9Bc/IgXTWh9HPuiNtQ6k2FGmyTJMD6SwPo4ttSN+FVLsQabutjkctKoTIujDqbwUdDKDaAKTvyr0SSrM3jD7cDHoopVopdDBgu4TSLA2jkfHQR2+q9YIeen0poTQrw+j+a6CTEqqVQBcnB7MwlMoWZPgi6KUT1TpCH23nZ10olS3IjX2gm/ZUaw+dNH8qy0KpbEFWdYGOqAbdWO7JqlAqJ88LiqCnWirVQkc312VPKJWT58oC6KqaStXQ09Dd2bIkKSfP91mgry1U2gJdnfN1Zi9Jiq4hHlI3DnrbQKX10NcP18qSZBaE0b1XQXdVVKqCzjovz/gDaQmjO34C/a2k0krorXBuhh9ISxhddxoMsIRKS6A764yMPpCWMLryZBjhDSq9AQP8PsJ62/ogA0kYfb0dDPGadhPEAGMOZGoolTA6qwWMUUmlShhi8K7MDKUSRqdYYJBZVJoFY5y9NQNDqYTROrdZI/EVMEiPf2dcKJUtyN1XwDgPUukBGKXj0gwLpbIFua2/ed9lnQbDtHoxo0KpbEGu7QkjTaTSRBjH+kgGhVI5eX7/RBhqApUmwEi/i2RKKJWT59famFDJTNs8vrY2M5Yk5eT5CSsMNpZKY2Gsi6tlSbKpXV7LyCQY7jrtJoixSjfJkmSTh9EDN8J4w6g0DEbr9okcSDdxGK25FCa4lEpDYLgOb8uBdJOG0a19YYaBVBoI47WcLQfSTRhGV58CU/SjUj+YwPIAIzdBNEkYfbcTzFFKpVKY4o6DEkqbQoV2YttAPajUA+a4ep/5oVSUc7oVZulCpS4wyU93mB1KxaiDHpiniEpFMMuP1psbSsWgmuthopZUagnTFH9sZigVpRsHwVRUgonavWleKBVdl58Jc9UwahfMVPB0BcwhimaXwGRhRoVhKsvUcphBFEy2wWwbGLUBJrt1JITxLMNbwnRrGLUGZrvsPAjDdWsG81UxqgqmO70YIictY9QymK8QIict/v927qVl6jKOwzh2WIjVWJQ8G2dhB0QcxEWHYpDEWsgfxAI7jLgRO0wh5sYG7ICIjLUQERzDDgtxEIsSYXBjh2JayLOxRsSNBVMLERdNIG7k6Rs3Nzf/rYvvb3d9XsL1Ai7VfiEHXEYR6wbgO9W+JYcLhhFPEOC4asfJ4YKjqh0lhwv6EesGYJ9q+8gBl55qPXLAZadqO8mBiCvI2+SASydi3QBsUW0LOeBSqVaRAy7rVVtPDri0I54gQCti3QCsVG0lOeDSVK1JDrg8otrD5IBLI+IJAixSbRE5YHNbxW1iwGemYkYMH1xTcY0YPphGPEGASyouEcMHF1VcJIYPxirGxPDBeRXnieGDUcQTBDil4hQxfHBCxQli+GCgwnjHBg6pOEQMH/QjniDAXhV7ieGDPSr2ECMC84YuMXywXcV2YvigE/EEATap2EQMH2xUsZEYPmhHrBuAJ1U8RQwftCKeIMAKFSuI4YPlKpYTwwcN1g2IsFjFYmIYQQUpnHBT2U1SOOEfniCIMGXdgAhXlV0lhRMmyiakcMIFZRdI4YQxTxBEGLFuQIQzys6QwglDZUNSOOFzZV+QwgkDniCIcFDZQVI4Yb+y/aRwQk9ZjxRO2KVsFymc0OUJgghblW0lhRNeUfYqKZxQKatI4YQNyjaQwgltniCIsEbZGlI4YZWyVaRwQlNZkxROWKZsGSmc0OAJggh3KbubFFZYULJACC/MWDcgwnUl1wnhhSlPEES4rOQyIbzwm5LfCeGFMesGRPheyQ+E8MKIJwginFZymhBeOKnkJCG8MGDdgAiHlRwmhBf6SvqE8MIHSj4kBLze5wkSAV3WDRGwQ8kOQsCro6RDCHhtVrKZEPCqeIJEQJt1QwQ8reQZQsCrpaRFCHg9quQxQsCryRMkApYqWUoIeC1RsoQQMFNCBrjdknSLDHCb8QSJgL8k/U0GuP0h6U8ywG0iaUIGuM1LmicD3MY8QSLgnKRzZIDbWUlnyQC3oaQhGeD2paSvyAC3AU+QCPhE0qdkgNsBSQfIALce64YI2C1pNxng1uUJEgHbJG0jA9xek/Q6GeBWsW6IgBckvUgGuLV5gkTAWklryQC31ZJWkwFuTdYNETAnaY4McGtIapABbvdIupcMsPtPIgL8ZqwbIuCGbhABflNNiQC/K7pCBPhNeIJEwFi/EgF+P+onIsBvpBER4Pe1viEC/IY8QSLgmI4RAX5HdIQI8OurTwT4faSPiQC/Hk+QCHhH7xIBfm/oTSLAr6MOEeD3kl4mAvwqniARsE7riAC/Z/UcEeDXUosI8HtcTxABfk2eIBHwoB4iAvzu0/1ECACRIAL+JUEETEkQAfMkiICfSRABQxJEwGckiIA+CSLgPRJEwFskiICKBBHwPAkioEWCCJgjQQQ8QII79D/eDQrIqmTAwgAAAABJRU5ErkJggg==);
background-repeat: no-repeat;
background-position:center;
background-size: 100% 100%;
overflow: hidden;
z-index: 2;
color: tansparent;
-moz-opacity: 0.0;
opacity: 0.0;
animation: glitter 6s linear 0s infinite normal;
-webkit-animation: glitter 6s linear 0s infinite normal;
-moz-animation: glitter 8s linear 0s infinite normal;
-ms-animation: glitter 8s linear 0s infinite normal;
-o-animation: glitter 8s linear 0s infinite normal;
}
.shine.small {
width: 20px;
height: 20px;
}
.shine.medium {
width: 30px;
height: 30px;
}
.shine.large {
width: 50px;
height: 50px;
}
/*CSS3 keyframes for glittering effect*/
@-webkit-keyframes glitter {
0% {
-webkit-transform: scale(0.3);
opacity: 0;
}
25% {
-webkit-transform: scale(1) ;
opacity: 1;
}
50% {
-webkit-transform: scale(0.3) ;
opacity: 0;
}
100% {
-webkit-transform: scale(0.3);
opacity: 0;
}
}
.button_base {
margin: 0;
border: 0;
font-size: 18px;
width: 50px;
height: 50px;
text-align: center;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-user-select: none;
cursor: default;
}
.button_base:hover {
cursor: pointer;
}
/* ### ### ### 11 */
.b11_3d_jumpback {
perspective: 500px;
-webkit-perspective: 500px;
-moz-perspective: 500px;
}
.b11_3d_jumpback div {
color: #000000;
background-color: #ffffff;
border: #000000 solid 1px;
padding: 10px;
position: absolute;
width: 100%;
height: 100%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.b11_3d_jumpback:hover div {
color: #ffffff;
background-color: #000000;
animation: b11_3d_jump 0.3s ease-out;
-webkit-animation: b11_3d_jump 0.3s ease-out;
-moz-animation: b11_3d_jump 0.3s ease-out;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
}
@-webkit-keyframes b11_3d_jump {
from {
transform: translateZ(0px) rotateX(0deg);
-webkit-transform: translateZ(0px) rotateX(0deg);
-moz-transform: translateZ(0px) rotateX(0deg);
background-color: #ffffff;
color: #000000;
}
49.99% {
transform: translateZ(100px) rotateX(90deg);
-webkit-transform: translateZ(100px) rotateX(90deg);
-moz-transform: translateZ(100px) rotateX(90deg);
background-color: #808080;
color: #000000;
}
50.00% {
transform: translateZ(100px) rotateX(-90deg);
-webkit-transform: translateZ(100px) rotateX(-90deg);
-moz-transform: translateZ(100px) rotateX(-90deg);
background-color: #000000;
color: #808080;
}
to {
transform: translateZ(0px) rotateX(0deg);
-webkit-transform: translateZ(0px) rotateX(0deg);
-moz-transform: translateZ(0px) rotateX(0deg);
background-color: #000000;
color: #ffffff;
}
}
@-moz-keyframes b11_3d_jump {
from {
transform: translateZ(0px) rotateX(0deg);
-webkit-transform: translateZ(0px) rotateX(0deg);
-moz-transform: translateZ(0px) rotateX(0deg);
background-color: #ffffff;
color: #000000;
}
49.99% {
transform: translateZ(100px) rotateX(90deg);
-webkit-transform: translateZ(100px) rotateX(90deg);
-moz-transform: translateZ(100px) rotateX(90deg);
background-color: #808080;
color: #000000;
}
50.00% {
transform: translateZ(100px) rotateX(-90deg);
-webkit-transform: translateZ(100px) rotateX(-90deg);
-moz-transform: translateZ(100px) rotateX(-90deg);
background-color: #000000;
color: #808080;
}
to {
transform: translateZ(0px) rotateX(0deg);
-webkit-transform: translateZ(0px) rotateX(0deg);
-moz-transform: translateZ(0px) rotateX(0deg);
background-color: #000000;
color: #ffffff;
}
}
@media screen and (min-width: 1240px) {
.yoko{
width:100%;
max-width:1200px;
margin:0 auto;
}
.yoko-1{
width:100%;
max-width:700px;
float:left;
margin-right:-30px;
margin-top:10px;
}
.yoko-2{
width:100%;
max-width:490px;
float:left;
}
}
@media screen and (max-width: 1239px) {
.yoko{
width:100%;
margin:0 auto;
}
.yoko-1{
width:100%;
max-width:600px;
}
.yoko-2{
width:100%;
max-width:500px;
margin-bottom:50px;
margin-top:10px;
}
}
/* ★★★みかん狩り枠★★★ */
.fashionable-box2{
background-color: #fff59d;
border: dashed 3px #ffb56c;
box-shadow: 0 0 0 3px #fff59d, 0 0 0 10px #ffb56c;
border-radius: 3px;
}
.fashionable-box2 p{
margin: 0;
padding: 0;
}
/* みかん狩り枠 背景 */
.pic_haikei-mikan{
background:#ffebbd;
border-radius:20px;
border-bottom:10px solid #FFF;
border-left:10px solid #FFF;
border-right:10px solid #FFF;
padding-top:20px;
}
@media screen and (max-width: 500px) {
.pic_haikei-mikan{
border-radius:0px;
background:#ffebbd;
border-bottom:10px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
padding-top:20px;
}
}
/* みかん狩りタイトル 文字大きさ */
.mikan_pic_title{
font-size:18px;
}
@media screen and (max-width: 300px) {
.mikan_pic_title{
font-size:6vw;
}
}
/* ★★★いちご狩り枠★★★ */
.fashionable-box3{
background-color: #ffcfe5;
border: dashed 3px #ff8fc2;
box-shadow: 0 0 0 3px #ffcfe5, 0 0 0 10px #ff8fc2;
border-radius: 3px;
}
.fashionable-box3 p{
margin: 0;
padding: 0;
}
/* いちご狩り枠 背景 */
.pic_haikei-ichigo{
background:#ffe6f1;
border-radius:20px;
border-bottom:10px solid #FFF;
border-left:10px solid #FFF;
border-right:10px solid #FFF;
padding-top:20px;
}
@media screen and (max-width: 500px) {
.pic_haikei-ichigo{
border-radius:0px;
background:#ffe6f1;
border-bottom:10px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
padding-top:20px;
}
}
/* いちご狩りタイトル 文字大きさ */
.ichigo_pic_title{
font-size:18px;
}
@media screen and (max-width: 300px) {
.ichigo_pic_title{
font-size:6vw;
}
}
/* ★★★メロン狩り枠★★★ */
.fashionable-box4{
background-color: #e3ffb6;
border: dashed 3px #70e260;
box-shadow: 0 0 0 3px #c0ff6e, 0 0 0 10px #70e260;
border-radius: 3px;
}
.fashionable-box4 p{
margin: 0;
padding: 0;
}
/* メロン狩り枠 背景 */
.pic_haikei-melon{
background:#ebf9cd;
border-radius:20px;
border-bottom:10px solid #FFF;
border-left:10px solid #FFF;
border-right:10px solid #FFF;
padding-top:20px;
}
@media screen and (max-width: 500px) {
.pic_haikei-melon{
border-radius:0px;
background:#ebf9cd;
border-bottom:10px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
padding-top:20px;
}
}
/* メロン狩りタイトル 文字大きさ */
.melon_pic_title{
font-size:18px;
}
@media screen and (max-width: 300px) {
.melon_pic_title{
font-size:6vw;
}
}
/* ★★★ぶどう狩り枠★★★ */
.fashionable-box5{
background-color: #ffd7f7;
border: dashed 3px #de78ff;
box-shadow: 0 0 0 3px #ffd7f7, 0 0 0 10px #de78ff;
border-radius: 3px;
}
.fashionable-box5 p{
margin: 0;
padding: 0;
}
/* ぶどう狩り枠 背景 */
.pic_haikei-budou{
background:#ffe6f1;
border-radius:20px;
border-bottom:10px solid #FFF;
border-left:10px solid #FFF;
border-right:10px solid #FFF;
padding-top:20px;
}
@media screen and (max-width: 500px) {
.pic_haikei-budou{
border-radius:0px;
background:#ffe6f1;
border-bottom:10px solid #FFF;
border-left:1px solid #FFF;
border-right:1px solid #FFF;
padding-top:20px;
}
}
/* ぶどう狩りタイトル 文字大きさ */
.budou_pic_title{
font-size:18px;
}
@media screen and (max-width: 300px) {
.budou_pic_title{
font-size:6vw;
}
}
.box3 {
color: #2c2c2f;
background: #cde4ff;/*背景色*/
width:300px;
}
.box3 p {
margin: 0;
padding: 0;
}
.box11{
padding: 0.5em 1em;
margin: 2em 0;
color: #5d627b;
background: white;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
margin: 0;
padding: 0;
}
.new-mark{
font-weight:bold;
font-family:'Helvetica', 'sans-serif';
position:relative;
display:block;
width:240px;
height:144px;
margin:40px;
overflow:visible;
}
.new-mark:before,
.new-mark:after{
display:block;
position:absolute;
left:-10px;
}
.new-mark:before{
content:"";
border:6px solid transparent;
border-top-color:#a1364f;
border-right-color:#a1364f;
top:32px;
}
.new-mark:after{
content:"NEW!";
background:#c24760;
color:#fff;
padding:0 24px;
height:24px;
line-height:24px;
top:8px;
z-index:10;
}
.box-kokuban {
background:#0B614B;
color:#fff;
border:8px ridge chocolate;
}
.box-kokuban-midashi {
position: relative;
padding: 1em 0;
}
.box-kokuban-midashi::before,
.box-kokuban-midashi::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 6px;
box-sizing: border-box;
}
.box-kokuban-midashi::before {
top: 0;
border-top: 2px solid #ccc;
border-bottom: 1px solid #ccc;
}
.box-kokuban-midashi::after {
bottom: 0;
border-top: 1px solid #ccc;
border-bottom: 2px solid #ccc;
}
/** ---------------------------------------
* Slider
----------------------------------------*/
.containerr {
width: 100%;
max-width: 2000px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
}
.slider-wrapperr {
z-index: 500;
width: 100%;
}
.slsl:before {
content: "";
display: block;
padding-top: 32.5%; /* 1:1 */
}
@media screen and (max-width: 800px) {
.slsl:before {
content: "";
display: block;
padding-top: 124.5%; /* 1:1 */ /*文字入りスライダー時設定 124.5%; *//*テスト中 95.5%; */
}
.slsl img {
width: 100%;
}
}
.slider-wrapperr ul {
width: 100%;
overflow: hidden;
position: relative;
}
.slider-wrapperr li {
display: none;
top: 0;
left: 0;
width: 100%;
position: absolute;
}
.slider-wrapperr li:first-child{
display: block;
}
.slider-wrapperr{
display: block;
}
.slider-wrapperr img {
max-width: 100%;
}
/**
/**
* ---[Botones-Control] ----------------------
**/
.control-buttons {
margin-top: 15px;
text-align: center;
}
.control-buttons li {
cursor: pointer;
display: inline-block;
background: #424f66;
text-indent: -99999px;
height: 16px;
width: 16px;
margin: 0 6px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
.control-buttons li:nth-child(odd).active {
background: #00c5b9;
}
.control-buttons li:nth-child(even).active {
background: #6bdd54;
}
.authors {
text-align: center;
color: #7a8699;
display: block;
font-size: 1.6em;
font-weight: 300;
margin-top: 80px;
font-size: 300;
}
.mozii-box{
position: relative;
margin: 0 auto;
}
.mozii-text{
position: absolute;
padding: .75em 0;
width: 100%;
text-align: center;
font-size:30px;
}
.mozii-text2{
padding: 20px 10px;
left: 0;
width: 100%;
text-align: center;
font-size:30px;
margin:0 auto;
max-width:660px;
}
@media screen and (max-width: 1200px) {
.mozii-text2{
padding: .75em 0;
left: 0;
width: 100%;
text-align: center;
font-size:30px;
margin:0 auto;
padding:10px;
}
}
.mozii-btn{
position: absolute;
}
/*余白と文字装飾は省略*/
.sample_box3_2 {
margin: 2em 0;
background: #fff2e4;/*背景色*/
color: #000000;/*文字色*/
border:2px solid #ff9b38;
width:70%;
}
.sample_box3_2 .sample_box_title{
padding: 0.5em 0.5em 0.4em;
text-align: center;
font-size: 1.3em;/*タイトル文字サイズ*/
background: #ff9b38;/*タイトル文字背景色*/
border-bottom: 3px solid #ff7f00;/*タイトル下線*/
color: #ffffff;/*タイトル文字色*/
font-weight: bold;
letter-spacing: 0.05em;
}
/* 吹き出し本体 みかん */
.fruit-fukidashi{
width:100%;
max-width:800px;
text-align:center;
color:#FFF;
text-shadow:0 2px 0 #916d6d;
line-height:1.1;
font-weight:bold;
margin-top:20px;
position:relative;
padding: 30px 20px 20px 20px;
background:#efa003;
border-radius:100px;
box-shadow: 1px 12px 0px 0px #666;/*影*/
margin-bottom: 1em;
}
/* 吹き出し本体 いちご */
.fruit-fukidashi-ichigo{
width:100%;
max-width:800px;
text-align:center;
color:#FFF;
text-shadow:0 2px 0 #916d6d;
line-height:1.1;
font-weight:bold;
margin-top:20px;
position:relative;
padding: 30px 20px 20px 20px;
background:#ff9292;
border-radius:100px;
box-shadow: 1px 12px 0px 0px #666;/*影*/
margin-bottom: 1em;
}
/* 吹き出し本体 メロン */
.fruit-fukidashi-melon{
width:100%;
max-width:800px;
text-align:center;
color:#FFF;
text-shadow:0 2px 0 #04600b;
line-height:1.1;
font-weight:bold;
margin-top:20px;
position:relative;
padding: 30px 20px 20px 20px;
background:#58b768;
border-radius:100px;
box-shadow: 1px 12px 0px 0px #666;/*影*/
margin-bottom: 1em;
}
/* 吹き出し本体 ぶどう */
.fruit-fukidashi-budou{
width:100%;
max-width:800px;
text-align:center;
color:#FFF;
text-shadow:0 2px 0 #5c0091;
line-height:1.1;
font-weight:bold;
margin-top:20px;
position:relative;
padding: 30px 20px 20px 20px;
background:#ad86ea;
border-radius:100px;
box-shadow: 1px 12px 0px 0px #666;/*影*/
margin-bottom: 1em;
}
/* 吹き出しのなかの文字 */
.fukidashi-1dan{
font-size:50px;
}
.fukidashi-2dan{
font-size:90px;
}
.fukidashi-3dan{
font-size:60px; color:#c6000a;
}
.sp_br{
display: none;
}
.outline {
font-weight:bold;
display : inline-block;
color : #db030e; /* 文字の色 */
font-size : 55pt; /* 文字のサイズ */
letter-spacing : 6px; /* 文字間 */
text-shadow :
3px 3px 0px #ffffff,
-3px 3px 0px #ffffff,
3px -3px 0px #ffffff,
-3px -3px 0px #ffffff,
3px 0px 0px #ffffff,
0px 3px 0px #ffffff,
-3px 0px 0px #ffffff,
0px -3px 0px #ffffff;
}
.fukidashi-naka{
display: inline;
}
/* 何度も繰り返す フェードインcss 【ふわっとしてる方】上スクロールに反応しない */
.js-animation {
opacity: 0;
visibility: hidden;
transform: translateY(40px);
transition: all 1s;
}
.js-animation.is-show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}
/* 一回きりのフェードインcss ふわっとしてる方 */
.fadeInUp {
opacity : 0;
transform: translateY(40px);
transition: 1s;
}
/* 色んな文字アニメ作成可 */
.baba{
opacity: 0;
}
.baba2{
opacity: 0;
}
.baba3{
opacity: 0;
transform: translateY(40px);
transition: 1s;
}
.baba4{
opacity: 0;
transform: translateY(40px);
transition: 1s;
}
@media screen and (max-width: 780px) {
.fukidashi-1dan{
font-size:8vw;
}
.fukidashi-2dan{
font-size:12vw;
}
.fukidashi-3dan{
font-size:9vw; color:#c60000;
}
.sp_br{
display: inline;
}
.outline {
font-weight:bold;
display : inline-block;
color : #db030e; /* 文字の色 */
font-size : 8vw; /* 文字のサイズ */
letter-spacing : 6px; /* 文字間 */
text-shadow :
3px 3px 0px #ffffff,
-3px 3px 0px #ffffff,
3px -3px 0px #ffffff,
-3px -3px 0px #ffffff,
3px 0px 0px #ffffff,
0px 3px 0px #ffffff,
-3px 0px 0px #ffffff,
0px -3px 0px #ffffff;
}
.fukidashi-naka{
display: none;
}
.ichigo-sumaho-kuuhaku{
padding-bottom:20px;
}
}
.sumaho_mini_mozi480{
font-size:18px;
}
@media screen and (max-width: 480px) {
.sumaho_mini_mozi480{
font-size:4vw;
}
.sumaho_kesu480{
display:none;
}
}
/*看板部分*/
.plate{
margin-top:30px;
border-radius:10px;
border:4px solid rgba(225,225,225,0);
position:relative;
}
/**コルク**/
#cork{
background:url(https://peonyqueen.files.wordpress.com/2015/10/cork02.jpg);
box-shadow: inset 0 0 0 3px rgba(85,46,12,0.7), 0px 5px 5px rgba(0, 0, 0, 0.5);
}
/*文字部分*/
.plate span{
padding:20px;/*フォントによって位置が変わるので、微調整してください*/
display:block;
text-align:center;
font-size:2rem;
text-shadow:inset 0px 1px 1px rgba(0, 0, 0, 0.5);
}
/**コルク**/
#cork span{
padding:23px 20px 18px;/*フォントによって上下の位置が変わるので、微調整してください*/
font-family: 'Limelight', cursive;
color: rgba(85,46,12,0.8);
}
/*ロープ部分*/
.plate:before,
.plate:after{
content:"";
width:4px;
height:50px;
position:absolute;
top:-34px;
box-shadow:inset 0px -1px 1px rgba(0, 0, 0, 0.5),0 0 5px rgba(0, 0, 0, 0.5);
}
.plate:before{
left:13px;
}
.plate:after{
right:13px;
}
/**コルク**/
#cork:before,
#cork:after{
background:#DBA560;
background-image:-webkit-linear-gradient(left top, #DBA560, #DBA560 45%,#AA7430 50% , #AA7430 55% , #DBA560 60% , #DBA560 100% );
background-image:linear-gradient(left top, #DBA560, #DBA560 45%,#AA7430 50% , #AA7430 55% , #DBA560 60% , #DBA560 100% );
background-size:10px 10px;
}
/*留め具部分*/
.plate span:before,
.plate span:after{
content:"";
border-radius:50%;
position:absolute;
top:10px;
box-shadow:inset 0px -1px 2px rgba(0, 0, 0, 0.5),inset 0px 1px 1px rgba(0, 0, 0, 0.2);
}
/**コルク**/
#cork span:before,
#cork span:after{
width:14px;
height:14px;
background:#86431C;
background-image:-webkit-linear-gradient(top, #A26937, #A26937 50%, #57311C 55% , #57311C 65% , #A26937 85% , #A26937 100% );
background-image:linear-gradient(top, #A26937, #A26937 50%, #57311C 55% , #57311C 65% , #A26937 85% , #A26937 100% );
background-size:10px;
box-shadow:inset 0px -1px 2px rgba(0, 0, 0, 0.5),inset 0px 1px 1px rgba(0, 0, 0, 0.2);
}
#cork span:before{
left:8px;
}
#cork span:after{
right:8px;
}
.photo_waku {
padding: 8px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #c2c2c2;
border-right: 1px solid #c2c2c2;
/* IE */
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true)";
filter: progid:DXImageTransform.Microsoft.Shadow(color=#cccccc,direction=135,strength=3,enabled=true); /* IE5.5+ */
background: #fff;
}
/** パスワード請求ページ デザイン変更 ↓↓ **/
@media all and (min-width: 550px) {
.pass_kakoi{
padding:20px 40px 20px 20px;
}
.pass_hissu{
font-size:15px;
color:#F00;
text-align:left;
margin-top:-28px;
margin-bottom:10px;
}
.pass_hissu2{
display:none;
}
.formrm{
width:100%;
max-width:460px;
margin:0 auto;
text-align:center;
}
.itemtem{
overflow: hidden;
margin-bottom: 20px;
}
.labelbel{
float: left;
margin-right: 20px;
width:100%;
height:30px;
max-width:135px;
border-left: solid 6px #e0505d;
border-bottom: dotted 1px #e0505d;
padding-left: 10px;
}
.labelbel2{
float: left;
margin-right: 20px;
width:100%;
height:30px;
max-width:135px;
border-left: solid 6px #3498db;
border-bottom: dotted 1px #3498db;
padding-left: 10px;
}
.inputss{
float: left;
width:100%;
max-width:300px;
}
}
@media all and (max-width: 549px) {
.pass_kakoi{
padding:20px 0px 20px 0px;
}
.pass_hissu{
display:none;
}
.pass_hissu2{
display:inline;
font-size:15px;
color:#F00;
}
.formrm{
width:100%;
}
.itemtem{
overflow: hidden;
margin-bottom: 20px;
}
.labelbel{
width:100%;
max-width:135px;
}
.inputss{
width:100%;
max-width:300px;
margin-top:5px;
}
}
.btn-area-pass{
text-align: center;
}
@media all and (max-width: 255px) {
.btn-area-pass input[type="submit"]{
margin-bottom:10px;
}
}
/** パスワード請求ページ デザイン変更 ↑↑ **/
/** いちご予約ボタン **/
.btn-square-shadow-st {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #ff4848;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #e53838;
border-radius: 3px;
}
.btn-square-shadow:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);/*影を小さく*/
border-bottom: none;
}
/** メロン予約ボタン **/
.btn-square-shadow-melon {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #3db867;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #3d9158;
border-radius: 3px;
}
.btn-square-shadow-melon:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/** メロン放題予約ボタン **/
.btn-square-shadow-melon-houdai {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #7abc06;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #4c7700;
border-radius: 3px;
}
.btn-square-shadow-melon-houdai:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/** ぶどう予約ボタン **/
.btn-square-shadow-budou {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #cb63f7;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #a049c4;
border-radius: 3px;
}
.btn-square-shadow-budou:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/** 食事＋メロン狩りセット予約ボタン **/
.btn-square-shadow-melonset {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #41bfaa;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #2b8274;
border-radius: 3px;
}
.btn-square-shadow-melonset:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/**浜焼き＋メロン狩りセット予約ボタン **/
.btn-square-shadow-melon-hamayaki {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #2862e5;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #1b45a6;
border-radius: 3px;
margin-bottom:5px;
}
.btn-square-shadow-melon-hamayaki:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/**BBQ＋メロン狩りセット予約ボタン **/
.btn-square-shadow-melon-bbq {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #ff2468;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #b31546;
border-radius: 3px;
margin-bottom:5px;
}
.btn-square-shadow-melon-bbq:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/**釜飯＋メロン狩りセット予約ボタン **/
.btn-square-shadow-melon-kama {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #2cb200;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #1c7000;
border-radius: 3px;
margin-bottom:5px;
}
.btn-square-shadow-melon-kama:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/**釜飯＋メロン食べ放題セット予約ボタン **/
.btn-square-shadow-melonhoudai-kama {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #ff6833;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #bf4e26;
border-radius: 3px;
margin-bottom:5px;
}
.btn-square-shadow-melonhoudai-kama:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/** 梨狩り予約ボタン **/
.btn-square-shadow-nashi {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #bcaa06;/*ボタン色*/
color: #FFF;
border-bottom: solid 4px #775900;
border-radius: 3px;
}
.btn-square-shadow-nashi:active {
/*ボタンを押したとき*/
-webkit-transform: translateY(4px);
transform: translateY(4px);/*下に動く*/
box-shadow: 0px 0px 1px rgba(0,186,0,0.7);/*影を小さく*/
border-bottom: none;
}
/* 浜焼き 苺スイーツバイキング 紹介*/
.fashionable-bbox{
padding: 10px 20px;
background-color: #ffccd9;
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
border-radius: 10px;
}
.fashionable-box5 p{
margin: 0;
padding: 0;
}
/* 浜焼き メロンスイーツバイキング 紹介*/
.fashionable-bbox-2{
padding: 10px 20px;
background-color: #dcf9d2;
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
border-radius: 10px;
}
.fashionable-box5-2 p{
margin: 0;
padding: 0;
}
/* ピンク系*/
.fashionable-bbox-3{
padding: 10px 20px;
background-color: #ffb3de;
background-image: radial-gradient(#fff 20%, transparent 0), radial-gradient(#fff 20%, transparent 0);
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
border-radius: 10px;
}
/* ノートな枠*/
.note4{
color: #7c2a2a;
font-weight: bold;
border: solid 1px #e6e6e6;
padding: 0.3em 1em 2em 1em;
box-shadow:2px 2px 0 rgba(0,0,0,.1);
background-color: #fff;
}
.sen4{
background-color: #fff;
background-image:
linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(100, 100, 100, 0) 0%, rgba(100, 100, 100, 0) 97.5%, #646464 100%);
background-size: 8px 100%,100% 2em;
line-height: 2em;
padding: 2em 1em 0.2em 1em;
}
/*★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆ お手軽 モーダルウィンドウ スマホ対応 スクロール対応 背景スクロール不可設定 ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆*/
.timeline3 {
display: inline-block;
width:100%;
max-width: 300px;
text-align: center;
text-decoration: none;
outline: none;
position: relative;
z-index: 2;
background-color: #fff;
border: 2px solid #333;
color: #333;
padding:6px 5px;
font-weight:bold;
cursor: pointer;
}
.timeline3:hover {
background-color: #fff;
border-color: #59b1eb;
color: #59b1eb;
}
.timeline3::before,
.timeline3::after {
position: absolute;
z-index: -1;
display: block;
content: '';
left: 0;
width: 100%;
height: 50%;
background-color: #fff;;
}
.timeline3,
.timeline3::before,
.timeline3::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.timeline3::before {
top: 0;
}
.timeline3::after {
bottom: 0;
}
.timeline3:hover::before,
.timeline3:hover::after {
height: 0;
background-color: #59b1eb;
}
.overlay3 {
display: none;
position: fixed;
top: -10px;
left: 0;
right: 0;
bottom: -10px;
background-color: rgba(0, 0, 0, .45);
overflow: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 9998;
}
.container3 {
display: table;
padding: 10px 0;
width: 100%;
height: 100%;
z-index: 9998;
}
.inner3 {
display: table-cell;
padding: 2.7em 2em;
vertical-align: middle;
z-index: 9998;
}
@media screen and (max-width: 700px) {
/* PC 翻訳押すと モーダルウィンドウ 位置変更 */
.container3{
margin-top:25px;
}
/* PC 翻訳押すと モーダルウィンドウ 位置変更 */
.translated-ltr .container3{
margin-top:70px;
}
/* 隙間間隔 小さいほど狭くなる */
.inner3 {
padding:12px;
}
}
.modal3 {
margin: 0 auto;
padding: 2.3em 2em 1.9em;
width:100%;
max-width: 850px;
text-align: justify;
text-justify: inter-ideograph;
border-radius: 7px;
background-color: #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, .2);
z-index: 9998;
position: relative;
}
@media screen and (max-width: 700px) {
.modal3 {
width:100%;
max-width: 850px;
}
}
.modal3::after {
display: table;
content: '';
}
.modal3 > p {
text-indent: 1em;
line-height: 1.7;
}
.bbbbutton3 {
width: 50px;
height: 50px;
border-radius: 50%;
color: #fff;
font-size: 18px;
font-weight:bold;
border: 0;
outline: 0;
background-color: #e57373;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
top: -10px;
right:-10px;
}
@media screen and (max-width: 700px) {
.bbbbutton3 {
top: -10px;
right:-5px;
}
}
.bbbbutton3:hover {
background-color: #dd7979;
}
.bbbbutton4 {
padding: .5em 1.4em;
color: #fff;
font-size: .95em;
border: 0;
border-radius: 4px;
outline: 0;
background-color: #e57373;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.bbbbutton4:hover {
background-color: #dd7979;
}
/*★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆ お手軽 モーダルウィンドウ スマホ対応 スクロール対応 背景スクロール不可設定 ★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆*/
/*★☆★☆★☆ TOPスマホ版 BOXレイアウト メロン ☆★☆★☆★☆★☆★☆*/
.top-box{
width:95%;
border: 1px solid #9cdba4;
margin-top:10px;
border-radius: 5px;
}
.top-box h3{
color: #139e23;
text-align: center;
margin: .2em auto;
background: #caf9be;
margin:0;
padding: .2em 0;
}
.top-box .top-inner{
padding:5px;
background:#FFF;
}
/*★☆★☆★☆☆★☆★☆★☆★☆★☆*/
/*★☆★☆★☆ TOPスマホ版 BOXレイアウト ぶどう ☆★☆★☆★☆★☆★☆*/
.top-box-budou{
width:95%;
border: 1px solid #f8b6ff;
margin-top:10px;
border-radius: 5px;
}
.top-box-budou h3{
color: #A636B2;
text-align: center;
margin: .2em auto;
background: #FBD4FF;
margin:0;
padding: .2em 0;
font-size: 20px;
}
.top-box-budou .top-inner-budou{
padding:5px;
background:#FFF;
}
/*★☆★☆★☆☆★☆★☆★☆★☆★☆*/
/*★☆★☆★☆ TOPスマホ版 BOXレイアウト みかん☆★☆★☆★☆★☆★☆*/
.top-box2{
width:95%;
border: 2px solid #d16300;
margin-top:10px;
}
.top-box2 h3{
color: #d16300;
text-align: center;
margin: .2em auto;
border-bottom: 2px solid #d16300;
background: #ffc48f;
margin:0;
padding: .2em 0;
}
.top-box2 .top-inner2{
padding:5px;
background:#FFF;
}
/*★☆★☆★☆☆★☆★☆★☆★☆★☆*/
/*★☆★☆★☆ TOPスマホ版 BOXレイアウト 桃 ☆★☆★☆★☆★☆★☆*/
.top-box-momo{
width:95%;
/*border: 2px solid #ff4dd9;*/
margin-top:10px;
background-color: white;
}
.top-box-momo h3{
color: #ff6464;
text-align: center;
margin: .2em auto;
border-bottom: 2px solid #c74283;
background: #f9bebe;
margin:0;
padding: .2em 0;
}
.top-box-momo .top-inner-momo{
padding:5px;
background:#FFF;
}
/*★☆★☆★☆☆★☆★☆★☆★☆★☆*/
/*★☆★☆★☆ TOPスマホ版 BOXレイアウト ぶどう＋桃 ☆★☆★☆★☆★☆★☆*/
.top-box-budou-momo{
width:95%;
/*border: 2px solid #ff4dd9;*/
margin-top:10px;
background-color: white;
}
.top-box-budou-momo h3{
color: #ad4b88;
text-align: center;
margin: .2em auto;
border-bottom: 2px solid #c74283;
background: #f7bae0;
margin:0;
padding: .2em 0;
}
.top-box-budou-momo .top-inner-budou-momo{
padding:5px;
background:#FFF;
}
/*★☆★☆★☆☆★☆★☆★☆★☆★☆*/
/*★☆★☆★☆ TOPスマホ版 BOXレイアウト いちご ☆★☆★☆★☆★☆★☆*/
.top-box-ichigo{
width:95%;
border: 2px solid #f24c4c;
margin-top:10px;
}
.top-box-ichigo h3{
color: #f24c4c;
text-align: center;
margin: .2em auto;
border-bottom: 2px solid #f24c4c;
background: #ffc2c2;
margin:0;
padding: .2em 0;
}
.top-box-ichigo .top-inner-ichigo{
padding:5px;
background:#FFF;
}
/*★☆★☆★☆☆★☆★☆★☆★☆★☆*/
/*★☆★☆★☆ ECサイト ☆★☆★☆★☆★☆★☆*/
.top-box-onlineshop{
width:97%;
border: 2px solid #f24c4c;
margin-left:5px;
margin-right:5px;
}
.top-box-onlineshop h3{
color: #f24c4c;
text-align: center;
margin: .2em auto;
border-bottom: 2px solid #f24c4c;
background: #ffc2c2;
margin:0;
padding: .2em 0;
}
.top-box-onlineshop .top-inner-onlineshop{
padding:5px;
background:#FFF;
}
/*★☆★☆★☆☆★☆★☆★☆★☆★☆*/
/*★☆★☆★☆ TOPスマホ版 BOXの中のリンクボタン ☆★☆★☆★☆★☆★☆*/
/*食事セット オレンジ*/
.btn-square-so-pop {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #fd9535;/*色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #d27d00;/*線色*/
}
.btn-square-so-pop:active {
/*押したとき*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
/*メロン*/
.btn-square-so-pop2 {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #3eba3e;/*色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #248e24;/*線色*/
}
.btn-square-so-pop2:active {
/*押したとき*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
/*みかん*/
.btn-square-so-pop3 {
position: relative;
display: inline-block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #ffb91d;/*色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #b27b00;/*線色*/
}
.btn-square-so-pop3:active {
/*押したとき*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
/*いちご*/
.btn-square-so-pop4 {
display: block;
padding: 0.25em 0.5em;
text-decoration: none;
color: #FFF;
background: #ff6464;/*色*/
border-radius: 4px;/*角の丸み*/
box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), inset 0 -2px 0 rgba(0, 0, 0, 0.05);
font-weight: bold;
border: solid 2px #ea4242;/*線色*/
}
.btn-square-so-pop3:active {
/*押したとき*/
box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
/*★☆★☆★☆☆★☆★☆★☆★☆★☆*/
.balloon1 {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 16px;
background: #e0edff;
border-radius:10px;
border:1px solid #903;
}
.balloon1:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -15px;
border: 15px solid transparent;
border-top: 15px solid #e0edff;
}
.balloon1 p {
margin: 0;
padding: 0;
}
/* 05.アメリカンな(?)吹き出し */
#heading05{
position:relative;
padding:5px 20px;
background:#fff;
border-top:#333 solid 3px;
border-bottom:#333 solid 3px;
background-image: -webkit-gradient(linear, left top, right bottom,
from( rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(255, 255, 255, 0.0)),
color-stop(0.4, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(0, 0, 0, 0.1)),
color-stop(0.6, rgba(255, 255, 255, 0.0)),
to( rgba(255, 255, 255, 0.0))
);
background-image: -webkit-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -moz-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: -o-linear-gradient(top -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-image: linear-gradient(to bottom -45deg,
transparent 40%,
rgba(0, 0, 0, 0.1) 40%,
rgba(0, 0, 0, 0.1) 60%,
transparent 60%
);
background-size:4px 4px;
}
#heading05:before{
content:" ";
position:absolute;
top:100%;
left:24px;
width:0;
height:0;
border-width:12px;
border-style:solid;
border-color:transparent;
border-top-color:#333;
}
#heading05:after{
content:" ";
position:absolute;
top:100%;
left:28px;
width:0;
height:0;
border-width:8px;
border-style:solid;
border-color:transparent;
border-top-color:#f0f0f0;
z-index:1;
}
.link-mozi-iro-kuro a:hover{
color: #000;
}
/* プチ告知 モーダルウィンドウ設定 */
.kakomi-box8 {
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
margin-top:-20px;
padding: 0.5em;
border: 3px dashed #ff9696; /*太さ・線種・色*/
color: #333; /* 文字色 */
background-color: #FFF; /* 背景色 */
border-radius: 1px; /*角の丸み*/
max-width:600px;
text-align:center;
}
@media screen and (max-width: 700px) {
.kakomi-box8 {
width: 90%;
}
}
/* プチ告知 料金表 */
.modal_ryoukin{
width:100%;
max-width:600px;
font-weight:bold;
}
.modal_ryoukin th {
background: #e9727e;
border:1px solid #fff;
color: #fff;
padding: 10px;
}
.modal_ryoukin td {
border:1px solid #666;
background: #FFF;
padding: 10px;
}
.modal_ryoukin td:first-child {
background: #fbf5f5;
}
@media screen and (max-width: 640px) {
.modal_ryoukin{
width:100%;
max-width:400px;
font-weight:bold;
}
}
.mozii-box{
position: relative;
margin: 0 auto;
}
.mozii-text{
position: absolute;
padding: .75em 0;
width: 100%;
text-align: center;
font-size:30px;
}
.mozii-text2{
padding: 20px 10px;
left: 0;
width: 100%;
text-align: center;
font-size:30px;
margin:0 auto;
max-width:660px;
}
@media screen and (max-width: 1200px) {
.mozii-text2{
padding: .75em 0;
left: 0;
width: 100%;
text-align: center;
font-size:30px;
margin:0 auto;
padding:10px;
}
}
.mozii-btn{
position: absolute;
}
/* 印刷領域設定 */
.print-area {
width: 100%;
max-width:700px;
}
.print-btn,
.print-all {
margin: 20px auto;
padding: 10px;
color: #FFF;
font-size: 20px;
text-align: center;
background-color: #666;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
cursor: pointer;
}
.print-btn {
width: 80%;
}
.print-btn:hover {
opacity:0.7;
}
.print-all {
width: 50%;
}
.print-off {
display: none;
}
/*プリント用CSS*/
@media print {
.print-area {
width: 100%;
}
.print-btn,.print-all {
display: none;
}
}
/* 印刷領域 枠 */
.print-waku{
position: relative;
padding: 1rem 2rem;
border: 4px solid #000;
}
.print-waku:before {
position: absolute;
top: 4px;
left: 4px;
width: calc(100% - 8px);
height: calc(100% - 8px);
content: '';
border: 2px solid #000;
}
/* 2020年お中元 */
.tokusyuu .tbl-r02 {
margin: auto;
width:100%;
}
/*.tokusyuu .tbl-r02 th {
max-width: 550px;
width:100%;
}*/
.tokusyuu .tbl-r02 td {
border: solid 1px #ccc;
padding: 10px;
}
@media screen and (max-width: 640px) {
.tokusyuu .last td:last-child {
border-bottom: solid 1px #ccc;
width: 100%;
}
.tokusyuu .tbl-r02 {
width: 100%;
}
.tokusyuu.tbl-r02 th,
.tokusyuu.tbl-r02 td {
border-bottom: none;
display: block;
width: 100%;
}
}
/* 穴あき BOX Ｂ */
.punch-box-b {
position: relative;
margin: 2em auto;
padding: 40px 20px 15px;
width: 90%; /* ボックス幅 */
background: #FFFAF0; /* ボックス背景色 */
color: #666; /* 文章色 */
border: 2px solid #FFDEAD; /* ボックス枠線 */
border-radius: 5px;
box-shadow: 0 0 3px #ccc; /* 影 */
}
.punch-box-b::before,
.punch-box-b::after {
position: absolute;
content: '';
top: 10px;
width: 18px;
height : 18px;
background: #fff; /*穴背景色*/
box-shadow: 0 0 8px #cccccc inset;
border: 1px solid #FFDEAD; /*パンチ穴枠*/
border-radius: 50%;
}
.punch-box-b::before { left: 80px;}
.punch-box-b::after { right: 80px;}
/* 割引券画像サイズ */
.sumaho-img-waribiki{
width:100%;
max-width:350px;
}
@media screen and (max-width: 500px) {
.sumaho-img-waribiki{
max-width:200px;
}
}
.sumaho-img-waribiki2{
width:100%;
max-width:150px;
}
/* フルーツ狩り 簡易タブ */
.tabbb_container {
padding-bottom: 1em;
background-color: #fff;
border:1px solid #37beb0;
margin: 0 auto;}
.tabbb_item {
width: calc(100%/2);
padding:15px 0;
border-bottom: 3px solid #37beb0 ;
background-color: #ececec;
text-align: center;
color: #37beb0 ;
display: block;
float: left;
text-align: center;
font-weight: bold;
transition: all 0.2s ease;
}
.tabbb_item:hover {
opacity: 0.55;
}
input[name="tabbb_item"] {
display: none;
}
.tabbb_content {
display: none;
clear: both;
overflow: hidden;
}
#tabbb1:checked ~ #tabbb1_content,
#tabbb2:checked ~ #tabbb2_content,
#tabbb3:checked ~ #tabbb3_content { /*, #tab4:checked ~ #tab4_contentを削除*/
display: block;
}
.tabbb_container input:checked + .tabbb_item {
background-color: #37beb0 ;
color: #fff;
}
/* コロナ注意書き枠 */
.kakomi-box8 {
margin-left:auto;
margin-right:auto;
margin-bottom:10px;
margin-top:-20px;
padding: 0.5em;
border: 3px dashed #7dd173; /*太さ・線種・色*/
color: #333; /* 文字色 */
background-color: #FFF; /* 背景色 */
border-radius: 1px; /*角の丸み*/
max-width:600px;
}
.eigyo-text{
text-align:center;
}
@media screen and (max-width: 700px) {
.kakomi-box8 {
width: 90%;
max-width:500px;
}
.eigyo-text{
text-align:left;
}
}
/* point欄ありなおしゃれ枠 */
.box28 {
position: relative;
padding: 25px 10px 7px;
border: solid 2px #FFC107;
background:#FFF;
}
.box28 .box28-title {
position: absolute;
display: inline-block;
top: -2px;
left: -2px;
padding: 0 9px;
height: 25px;
font-size: 17px;
background: #F4A506;
color: #ffffff;
font-weight: bold;
}
.box28 p {
margin: 0;
padding: 0;
}
/* ピンク背景 ストライプ */
.mybox{
position: relative;
z-index: 0;
}
.mybox:before{
background: repeating-linear-gradient(-45deg, #f5d5da, #f5d5da 5px, #fcf0f1 0, #fcf0f1 10px); /* ストライプの色 */
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: -2;
}
/* 黄色強調のオシャレ枠 */
.kiiro-osyare-waku {
position: relative;
background: #fff100;
}
.kiiro-osyare-waku:before {
position: absolute;
top: -7px;
left: -7px;
width: 100%;
height: 100%;
content: '';
border: 4px solid #000;
}
/* googleマップ 小設定 */
.g_map_mini {
position: relative;
width: 100%;
padding: calc(300 / 400 * 100%) 0 0;
}
.g_map_mini iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/*====================================================================
.s_05 .accordion_one
====================================================================*/
.s_05 .accordion_one {
max-width: 1024px;
margin: 0 auto;
}
.s_05 .accordion_one .accordion_header {
background-color: #db0f2f;
color: #fff;
font-size: 26px;
font-weight: bold;
padding: 20px 11%;
text-align: center;
position: relative;
z-index: +1;
cursor: pointer;
transition-duration: 0.2s;
}
.s_05 .accordion_one:nth-of-type(2) .accordion_header {
background-color: #ff9a05;
}
.s_05 .accordion_one:nth-of-type(3) .accordion_header {
background-color: #1c85d8;
}
.s_05 .accordion_one .accordion_header:hover {
opacity: .8;
}
.s_05 .accordion_one .accordion_header .i_box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
right: 5%;
width: 40px;
height: 40px;
border: 1px solid #fff;
margin-top: -20px;
box-sizing: border-box;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
}
.s_05 .accordion_one .accordion_header .i_box .one_i {
display: block;
width: 18px;
height: 18px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
position: relative;
}
.s_05 .accordion_one .accordion_header.open .i_box {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.s_05 .accordion_one .accordion_header .i_box .one_i:before, .s_05 .accordion_one .accordion_header .i_box .one_i:after {
display: flex;
content: '';
background-color: #fff;
border-radius: 10px;
width: 18px;
height: 4px;
position: absolute;
top: 7px;
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: center center;
}
.s_05 .accordion_one .accordion_header .i_box .one_i:before {
width: 4px;
height: 18px;
top: 0;
left: 7px;
}
.s_05 .accordion_one .accordion_header.open .i_box .one_i:before {
content: none;
}
.s_05 .accordion_one .accordion_header.open .i_box .one_i:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.s_05 .accordion_one .accordion_inner {
display: none;
padding: 30px 30px;
border-left: 2px solid #db0f2f;
border-right: 2px solid #db0f2f;
border-bottom: 2px solid #db0f2f;
box-sizing: border-box;
}
.s_05 .accordion_one:nth-of-type(2) .accordion_inner {
border-left: 2px solid #ff9a05;
border-right: 2px solid #ff9a05;
border-bottom: 2px solid #ff9a05;
}
.s_05 .accordion_one:nth-of-type(3) .accordion_inner {
border-left: 2px solid #1c85d8;
border-right: 2px solid #1c85d8;
border-bottom: 2px solid #1c85d8;
}
.s_05 .accordion_one .accordion_inner .box_one {
height: 300px;
}
.s_05 .accordion_one .accordion_inner p.txt_a_ac {
margin: 0;
}
.s_05 .accordion_one .accordion_inner .closeArea {
width: 180px;
margin: 0 auto;
}
.s_05 .accordion_one .accordion_inner .closeArea .close_box a.close_btn {
display: flex;
justify-content: center;
align-items: center;
background: #db0f2f;
padding: 15px 15px 15px 20px;
text-decoration: none;
line-height: 1.3;
color: #fff;
font-size: 18px;
font-weight: bold;
position: relative;
cursor: pointer;
transition-duration: 0.2s;
}
.s_05 .accordion_one:nth-of-type(2) .accordion_inner .closeArea .close_box a.close_btn {
background-color: #ff9a05;
}
.s_05 .accordion_one:nth-of-type(3) .accordion_inner .closeArea .close_box a.close_btn {
background-color: #1c85d8;
}
.s_05 .accordion_one .accordion_inner .closeArea .close_box a.close_btn:hover {
opacity: .8;
}
.s_05 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
}
.s_05 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 18px;
height: 18px;
}
.s_05 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:before, .s_05 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:after {
content: '';
background-color: #fff;
border-radius: 10px;
width: 18px;
height: 4px;
position: absolute;
top: 7px;
left: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(45deg);
transform-origin: center center;
}
.s_05 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:before {
width: 4px;
height: 18px;
top: 0;
left: 7px;
}
@media screen and (max-width: 1024px) {
.s_05 .accordion_one .accordion_header {
font-size: 18px;
}
.s_05 .accordion_one .accordion_header .i_box {
width: 30px;
height: 30px;
margin-top: -15px;
}
.s_05 .accordion_one .accordion_inner .closeArea .close_box a.close_btn {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.s_05 .accordion_one .accordion_header {
font-size: 16px;
text-align: left;
padding: 15px 60px 15px 15px;
}
}
/*====================================================================
.s_066 .accordion_one
====================================================================*/
.s_066 .accordion_one {
max-width: 1024px;
margin: 0 auto;
}
.s_066 .accordion_one .accordion_header {
background-color: #db0f2f;
color: #fff;
font-size: 26px;
font-weight: bold;
padding: 20px 11%;
text-align: center;
position: relative;
z-index: +1;
cursor: pointer;
transition-duration: 0.2s;
}
.s_066 .accordion_one:nth-of-type(2) .accordion_header {
background-color: #ff9a05;
}
.s_066 .accordion_one:nth-of-type(3) .accordion_header {
background-color: #1c85d8;
}
.s_066 .accordion_one .accordion_header:hover {
opacity: .8;
}
.s_066 .accordion_one .accordion_header .i_box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
right: 5%;
width: 40px;
height: 40px;
border: 1px solid #fff;
margin-top: -20px;
box-sizing: border-box;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
}
.s_066 .accordion_one .accordion_header .i_box .one_i {
display: block;
width: 18px;
height: 18px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transform-origin: center center;
transition-duration: 0.2s;
position: relative;
}
.s_066 .accordion_one .accordion_header.open .i_box {
-webkit-transform: rotate(-360deg);
transform: rotate(-360deg);
}
.s_066 .accordion_one .accordion_header .i_box .one_i:before, .s_066 .accordion_one .accordion_header .i_box .one_i:after {
display: flex;
content: '';
background-color: #fff;
border-radius: 10px;
width: 18px;
height: 4px;
position: absolute;
top: 7px;
left: 0;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
transform-origin: center center;
}
.s_066 .accordion_one .accordion_header .i_box .one_i:before {
width: 4px;
height: 18px;
top: 0;
left: 7px;
}
.s_066 .accordion_one .accordion_header.open .i_box .one_i:before {
content: none;
}
.s_066 .accordion_one .accordion_header.open .i_box .one_i:after {
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.s_066 .accordion_one .accordion_inner {
display: none;
padding: 30px 30px;
border-left: 2px solid #db0f2f;
border-right: 2px solid #db0f2f;
border-bottom: 2px solid #db0f2f;
box-sizing: border-box;
}
.s_066 .accordion_one:nth-of-type(2) .accordion_inner {
border-left: 2px solid #ff9a05;
border-right: 2px solid #ff9a05;
border-bottom: 2px solid #ff9a05;
}
.s_066 .accordion_one:nth-of-type(3) .accordion_inner {
border-left: 2px solid #1c85d8;
border-right: 2px solid #1c85d8;
border-bottom: 2px solid #1c85d8;
}
.s_066 .accordion_one .accordion_inner .box_one {
max-height: 100%;
}
.s_066 .accordion_one .accordion_inner p.txt_a_ac {
margin: 0;
}
.s_066 .accordion_one .accordion_inner .closeArea {
width: 180px;
margin: 0 auto;
}
.s_066 .accordion_one .accordion_inner .closeArea .close_box a.close_btn {
display: flex;
justify-content: center;
align-items: center;
background: #db0f2f;
padding: 15px 15px 15px 20px;
text-decoration: none;
line-height: 1.3;
color: #fff;
font-size: 18px;
font-weight: bold;
position: relative;
cursor: pointer;
transition-duration: 0.2s;
}
.s_066 .accordion_one:nth-of-type(2) .accordion_inner .closeArea .close_box a.close_btn {
background-color: #ff9a05;
}
.s_066 .accordion_one:nth-of-type(3) .accordion_inner .closeArea .close_box a.close_btn {
background-color: #1c85d8;
}
.s_066 .accordion_one .accordion_inner .closeArea .close_box a.close_btn:hover {
opacity: .8;
}
.s_066 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
left: 10%;
width: 30px;
height: 30px;
margin-top: -15px;
}
.s_066 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: 18px;
height: 18px;
}
.s_066 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:before, .s_066 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:after {
content: '';
background-color: #fff;
border-radius: 10px;
width: 18px;
height: 4px;
position: absolute;
top: 7px;
left: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(45deg);
transform-origin: center center;
}
.s_066 .accordion_one .accordion_inner .closeArea .close_box a.close_btn .i_box .one_i:before {
width: 4px;
height: 18px;
top: 0;
left: 7px;
}
@media screen and (max-width: 1024px) {
.s_066 .accordion_one .accordion_header {
font-size: 18px;
}
.s_066 .accordion_one .accordion_header .i_box {
width: 30px;
height: 30px;
margin-top: -15px;
}
.s_066 .accordion_one .accordion_inner .closeArea .close_box a.close_btn {
font-size: 14px;
}
}
@media screen and (max-width: 767px) {
.s_066 .accordion_one .accordion_header {
font-size: 16px;
text-align: left;
padding: 15px 60px 15px 15px;
}
}
/* スマホの時は詳細化する */
.kesu_input{
display: none;
}
@media screen and (max-width: 500px) {
.kesu_input{
display: inline;
}
.accList input {
display: none;
}
.syouryaku-link{
margin: 8px 0 6px 0;
padding-bottom: 8px;
text-align: center;
}
/* 「詳細」文字設定 ↓ */
.syouryaku-text {
position: relative;
max-height: 40px;
overflow: hidden;
transition: 0.5s;
margin: -30px 0px 0px 0px;
padding-bottom: 0px;
}
.syouryaku-text label::before {
content: "詳細 ▼";
position: absolute;
bottom: 5px;
right: 0;
display: inline-block;
width: 124px;
text-align: center;
border: 1px solid #333;
color: #333;
background-color: #fff;
padding: 4px 8px;
z-index: 500;
}
.accList input:checked + .syouryaku-link + .syouryaku-text {
max-height: 5000px;
padding-bottom: 20px;
}
.accList input:checked + .syouryaku-link + .syouryaku-text label::before {
content: "閉じる ▲";
}
/* 「詳細」文字設定 ↑ */
/* 「プラン詳細」文字設定 ↓ */
.syouryaku-text2 {
position: relative;
max-height: 40px;
overflow: hidden;
transition: 0.5s;
margin: -30px 0px 0px 0px;
padding-top: 40px;
padding-bottom: 0px;
}
.syouryaku-text2 label::before {
content: "プラン詳細 ▼";
position: absolute;
bottom: 5px;
right: 0;
display: inline-block;
width: 124px;
text-align: center;
border: 1px solid #333;
color: #333;
background-color: #fff;
padding: 4px 8px;
z-index: 500;
}
.accList input:checked + .syouryaku-link + .syouryaku-text2 {
max-height: 5000px;
padding-bottom: 20px;
}
.accList input:checked + .syouryaku-link + .syouryaku-text2 label::before {
content: "閉じる ▲";
}
/* 「プラン詳細」文字設定 ↑ */
}
.contenedoor {
display: table;
margin: 20px auto;
position: relative;
width:90%;
}
.expanddd {
width:100%;
padding:15px 10px;
max-height: 80px;
overflow: hidden;
position: relative;
border-bottom: 1px solid #aaa;
transition: .5s;
}
.expanddd::before {
content: "";
position: absolute;
width: 100%;
height: 50%;
bottom: 0;
background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff);
pointer-events: none;
transition: 1s;
}
.contenedoor input {
visibility: hidden;
}
.contenedoor label {
position: absolute;
bottom: -.8em;
display: block;
font-size: .9em;
padding: .20em 10px;
right: 0;
background: #aaa;
box-shadow:-5px 0 white;
color: white;
z-index:999;
cursor: pointer;
text-transform: uppercase;
}
.contenedoor label:before {
content: "続きを読む";
}
.contenedoor input:checked + label:before {
content: "閉じる"
}
input[type=checkbox]:checked ~ .expanddd {
max-height: 1000px;
}
input[type=checkbox]:checked ~ .expanddd:before {
opacity: 0
}
.tab_wake_fruit{
margin:2em auto;
text-align: center;
}
.tab_wake_fruit label{
margin:3em .2em;
padding:.7em 3em;
border: 3px solid rgba(255,179,107,.5);
border-radius:5px;
box-shadow: 0 2px 2px rgba(0,0,0,.01);
color:#555;
}
.tab_wake_fruit label:hover{
background-color:rgba(255,179,107,.5);
transform:scale(1.1);
opacity:.7;
}
.tab_wake_fruit input{
display:none;
}
.fooods{
display:block;
text-align:center;
}
.fooods ul{
display:none;
color:#333;
text-align:center;
list-style: none;
-webkit-animation: slide 0.5s ease-in-out 0s;
animation:slide 0.5s ease-in-out 0s;
}
.fooods ul li:before{
font-family: "Font Awesome 5 Free";/*Font Awesomeの読み込み必要*/
content: "f105";
color: #f8c678;
font-weight: 900;
padding-right:7px;
padding-left:10px;
}
.tab_wake_fruit input:nth-of-type(1):checked ~ .fooods ul:nth-child(1),
.tab_wake_fruit input:nth-of-type(2):checked ~ .fooods ul:nth-child(2),
.tab_wake_fruit input:nth-of-type(3):checked ~ .fooods ul:nth-child(3){
display:block;
}
.tab_wake_fruit input:checked + label{
background-color:rgba(255,179,107,.7);
color:#fff;
}
@keyframes slide{
0%{
opacity:0;
transform:translateY(20px);
}
100%{
opacity:1;
transform:translateY(0px);
}
}
/*
*/
/*★★★プルーン 隠し枠 ボタンで表示非表示★★★★★*/
/*全体*/
.hidden_box {
margin: 2em 0;
padding: 0;
color:#9002c4;
}
/*ボタン装飾*/
.hidden_box label {
padding: 15px;
font-weight: bold;
border: solid 2px black;
cursor :pointer;
background: #FFF;
}
/*ボタン文字*/
.hidden_box label span:before {
content: "(クリックで表示)";
font-size:15px;
}
/*ボタン文字 切り替え*/
.hidden_box input:checked ~ label span:before {
content: "(クリックで閉じる)";
font-size:15px;
}
/*アイコンを表示*/
.hidden_box label:before {
display: inline-block;
content: '\f00e';
font-family: 'Font Awesome 5 Free';
padding-right: 5px;
transition: 0.2s;
}
/*枠色を切り替え*/
.hidden_box input:checked + label {
background: #ba78d6;
color:#FFF;
}
/*アイコンを切り替え*/
.hidden_box input:checked ~ label:before {
content: '\f00d';
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
color: #FFF;
}
/*チェックは見えなくする*/
.hidden_box input {
display: none;
}
/*中身を非表示にしておく*/
.hidden_box .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}
/*★★★プルーン 隠し枠 ボタンで表示非表示★★★★★*/
/*★★★オレンジ 隠し枠 ボタンで表示非表示★★★★★*/
/*全体*/
.hidden_box_orange {
margin: 2em 0;
padding: 0;
color:#f46300;
}
/*ボタン装飾*/
.hidden_box_orange label {
padding: 15px;
font-weight: bold;
border: solid 2px #900;
cursor :pointer;
background: #FFF;
}
/*ボタン文字*/
.hidden_box_orange label span:before {
content: "(クリックで表示)";
font-size:15px;
}
/*ボタン文字 切り替え*/
.hidden_box_orange input:checked ~ label span:before {
content: "(クリックで閉じる)";
font-size:15px;
}
/*アイコンを表示*/
.hidden_box_orange label:before {
display: inline-block;
content: '\f00e';
font-family: 'Font Awesome 5 Free';
padding-right: 5px;
transition: 0.2s;
}
/*枠色を切り替え*/
.hidden_box_orange input:checked + label {
background: #ff9b57;
color:#FFF;
}
/*アイコンを切り替え*/
.hidden_box_orange input:checked ~ label:before {
content: '\f00d';
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
color: #FFF;
}
/*チェックは見えなくする*/
.hidden_box_orange input {
display: none;
}
/*中身を非表示にしておく*/
.hidden_box_orange .hidden_show {
height: 0;
padding: 0;
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
/*クリックで中身表示*/
.hidden_box_orange input:checked ~ .hidden_show {
padding: 10px 0;
height: auto;
opacity: 1;
}
/*★★★ オレンジ 隠し枠 ボタンで表示非表示★★★★★*/
.sen15 {
background-color: #fff;
background-image:
linear-gradient(90deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 50%, #fff 0%, #fff 100%), linear-gradient(180deg, rgba(237, 119, 128, 0) 0%, rgba(237, 119, 128, 0) 95%, #ed7780 100%);
background-size: 8px 100%,100% 2em;
line-height: 2;
padding: 4px 10px 15px 10px;
color:#000;
}
/*文字 マーカー黄*/
.ma-ka-kiiro{
background:linear-gradient(transparent 80%, #ffd31a 0%);
font-weight:bold;
font-size:1em;
}
/*★★★ リボンの補足付き オシャレ枠 ★★★★★*/
.ribbon20-wrapper {
display: block;
position: relative;
margin: 0 auto;
padding: 25px 5px 20px 5px;
width: 300px;
background: #f6ff83;
border:6px double #000;
}
.ribbon20 {
display: inline-block;
position: absolute;
left: 0;
top: -10px;
box-sizing: border-box;
padding: 0 12px;
margin: 0;
height: 30px;
line-height: 30px;
font-size: 18px;
letter-spacing: 0.1em;
color: white;
background: #3b1aff;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
}
.ribbon20:before {
position: absolute;
content: '';
top: 0;
left: -7px;
border: none;
height: 38px;
width: 7px;
background: #3b1aff;
border-radius: 5px 0 0 5px;
}
.ribbon20:after {
position: absolute;
content: '';
bottom: -7px;
left: -5px;
border: none;
height: 7px;
width: 5px;
background: #1d089b;
border-radius: 5px 0 0 5px;
}
/*★★★ 食事メニュー追加 釜飯・陶板等 収納テキストタブ設定 ★★★★★*/
.tab-wrap {
background: White;
box-shadow: 0 0 5px rgba(0,0,0,.1);
display: flex;
flex-wrap: wrap;
overflow: hidden;
padding: 0 0 20px;
}
.tab-label {
color: Gray;
cursor: pointer;
flex: 1;
font-weight: bold;
order: -1;
padding: 12px 24px;
position: relative;
text-align: center;
transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
user-select: none;
white-space: nowrap;
-webkit-tap-highlight-color: transparent;
}
/* 切り替えタブ タイトル */
.tab-label .asd {
border-bottom:1px solid;
padding-bottom:2px;
}
/* 切り替えタブ タイトル span部分 */
.tab-label .asd2 {
font-size:18px;
}
.tab-label:hover {
background: rgba(0, 191, 255,.1);
}
.tab-switch:checked + .tab-label {
background: #666;
color: #FFF;
font-size:18px;
}
/* 切り替えタブ タイトル チェック時*/
.tab-switch:checked + .tab-label .asd {
border-bottom:3px dotted;
padding-bottom:2px;
}
/* 切り替えタブ タイトル span部分 チェック時*/
.tab-switch:checked + .tab-label .asd2 {
font-size:20px;
}
.tab-label::after {
background: #ffdc0b;
bottom: 0;
content: '';
display: block;
height: 6px;
left: 0;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateX(100%);
transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
width: 100%;
z-index: 1;
}
.tab-switch:checked ~ .tab-label::after {
transform: translateX(-100%);
}
.tab-switch:checked + .tab-label::after {
opacity: 1;
transform: translateX(0);
}
.tab-content {
height:0;
opacity:0;
padding: 0 5px;
pointer-events:none;
transform: translateX(-30%);
transition: transform .3s 80ms, opacity .3s 80ms;
width: 100%;
}
.tab-switch:checked ~ .tab-content {
transform: translateX(30%);
}
.tab-switch:checked + .tab-label + .tab-content {
height: auto;
opacity: 1;
order: 1;
pointer-events:auto;
transform: translateX(0);
}
.tab-wrap::after {
content: '';
height: 20px;
order: -1;
width: 100%;
}
.tab-switch {
display: none;
}
/* ============================== */
.deruderu-oya{
position:relative;
}
.deruderu-ko{
position:absolute;
z-index:9999;
}
/* ===========トップページ フルーツ狩りセットタイトル=================== */
.title_set {
margin: 0 auto;
text-align: center;
width: 60%;
max-width: 500px;
}
.title_set img {
width: 100%;
}
@media only screen and (max-width: 480px) {
.title_set {
width: 80%;
}
}
/*セットプランページ 予約ボタン下配置 */
.rate-plan {
position: relative;
display: inline-block;
margin: 1.5em 0;
padding: 7px 10px;
min-width: 120px;
max-width: 100%;
color: #555;
font-size: 12px;
background: #FFF;
border: solid 3px #555;
box-sizing: border-box;
border-radius: 5px;
border-width: 1px;
}
.rate-plan:before {
content: "";
position: absolute;
top: -26px;
left: 50%;
margin-left: -15px;
border: 12px solid transparent;
border-bottom: 14px solid #FFF;
z-index: 2;
}
.rate-plan:after {
content: "";
position: absolute;
top: -30px;
left: 50%;
margin-left: -17px;
border: 14px solid transparent;
border-bottom: 16px solid #555;
z-index: 1;
}
.rate-plan p {
margin: 0;
padding: 0;
}
/*★★★ 電子チケット説明 ★★★★★*/
.h1-title {
margin-bottom: 32px;
color: #f6861e;
font-weight: 700;
}
.wrap-white {
background: white;
padding: 16px ;
text-align: center;
border-radius: 8px;
}
.wrap-link {
text-align: center;
}
.h2-No {
font-size: 48px;
}
.h2-title {
font-size: 18px;
font-weight: bold;
}
.linktitle {
font-size: 16px;
font-weight: 700;
padding-right: 16px;
}
.imgicon {
width: 7%;
}
.link-button {
background: #ae7d50;
padding: 8px 16px;
border-radius: 50px;
color:white;
margin-left: 8px;
display: flex;
justify-content: space-between;
}
.icon-arrow {
width: 5%;
fill: white;
}
@media only screen and (max-width: 480px) {
.h1-title {
font-size: 24px;
}
.h2-No {
font-size: 32px;
}
.h2-title {
font-size: 16px;
}
.linktitle {
font-size: 14px;
font-weight: 700;
}
.imgicon {
width: 15%;
}
.icon-arrow {
width: 10%;
}
}
/*--------------------------------------
カード型_02
--------------------------------------*/
.card {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 350px));
grid-template-rows: auto;
margin: auto;
width: 96%;
max-width: 100rem;
gap: 4%;
justify-content: center;
}
.l-wrapper_02 {
margin: 1rem auto;
width: 100%;
}
.card-radius_02{
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0,0,0,.2);
background-color: #FFF;
}
.card_02 {
background-color: #fff;
box-shadow: 0 0 0px rgba(0, 0, 0, .16);
color: #212121;
text-decoration: none;
}
.card__header_02 {
display: flex;
flex-wrap: wrap;
}
.card__title_02 {
color:#333333;
padding: 1rem 1.5rem 0;
font-size: 1.2rem;
order: 1;
font-weight: bold;
text-decoration: none;
/*線の種類（実線） 太さ 色*/
border-bottom: solid 3px black;
}
.card__thumbnail_02 {
margin: 0;
order: 0;
}
.card__image_02 {
width: 100%;
max-width: 400px;
}
.card__body_02 {
padding: 0 1.5rem;
}
.card__text_02 {
font-size: .8rem;
text-align:center;
text-decoration: none;
}
.card__text2_02 {
font-size: .8rem;
margin-top: 0;
margin-bottom: 1.5rem;
}
.card__text_01 {
font-size: .8rem;
text-align:center;
text-decoration: none;
padding-bottom: 0;
}
.card__text2_01 {
font-size: .8rem;
margin-top: 0;
margin-bottom: 2rem;
}
.card__text_01 + .card__text_01 {
margin-top: .5rem;
}
.card__footer_01 {
padding: 1rem;
border-top: 1px solid #ddd;
}
.button_01 {
display: inline-block;
text-decoration: none;
transition: background-color .3s ease-in-out;
text-align: center;
}
.button_01 a {
text-decoration: none;
}
.button_01.-compact {
padding: .5rem 1rem;
border-radius: .25rem;
background-color: #f5a517;
color: #fff;
font-weight: bold;
text-decoration: none;
}
.button_01.-compact:hover,
.button_01.-compact:focus {
background-color: #6bb6ff;
}