html,body{
margin: 0%;
padding: 0%;
height:100%;
background-attachment:fixed;
/*border:1px solid black;*/
}
@media screen and (max-width: 550px) {
body {
width: 100%;
height:auto;
}
}
@media screen and (min-width: 551pxpx) {
body {
}
}
.header_fixed{
position: fixed;
z-index: 9999;
top: 0%;
width:100%;
height: auto;
left: 0%;
background-color : #000;
filter:alpha(opacity=0);
-moz-opacity: 0.5;
opacity: 0.5;
background: linear-gradient(#000000, #203744, #e7e7e7);*/
padding:0% 0 0%;
/*border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.header_fixed {
}
}
@media screen and (min-width: 551px) {
.header_fixed{
}
}
.top_box1 {
width:100%;
height:100%;
left:0%;
/*border:5px solid green;*/
}
@media screen and (max-width: 550px) {
.top_box1 {
height:50%;
}
}
@media screen and (min-width: 551px) {
.top_box1 {
}
}
.tbox3 {
margin: 0px;
width: 38%;
height: auto;
display: inline-block;
font-family:"KaiTi", serif;
/*font-family: "Arial", "メイリオ";*/
color: white ;
/*border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.tbox3 {
width: 80%;
font-size: 13px;
font-family:"KaiTi", serif;
}
}
@media screen and (min-width: 551px) {
.tbox3 {
font-size: 15px;
}
}
.index_01_rogo{
display: inline-block;
margin: 0%;
width: 15%;
height:auto;
/*border: 5px solid blue;*/
}
.index_01_rogo > .cress_img{
/*display: inline-block;*/
width: 100%;
}
@media screen and (max-width: 550px) {
.index_01_rogo {
width: 18%;
}
.cress_img{
}
}
@media screen and (min-width: 551px) {
.index_01_rogo {
}
.cress_img{
}
}
.tb3cn1 {
display: inline-block;
width: 80%;
height: auto;
text-align: left;
font-size: 1.2vw;
font-family:"KaiTi", serif;
/*font-family: "Arial", "メイリオ";*/
color: white ;
/*border:3px solid yellow;*/
}
@media screen and (max-width: 550px) {
.tb3cn1 {
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.tb3cn1 {
}
}
.tb3cn2 {
margin: 0px;
width: 65%;
height: auto;
text-align: center;
display: inline-block;
font-family:"KaiTi", serif;
/*font-family: "Arial", "メイリオ";*/
color: white ;
/*border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.tb3c2 {
font-size: 5.0vw;
}
}
@media screen and (min-width: 551px) {
.tb3cn2 {
font-size: 2.5vw;
}
}
.boxsyousai {
width: 60%;
height: auto;
text-align: center;
display: inline-block;
font-family:"KaiTi", serif;
/*font-family: "Arial", "メイリオ";*/
color: white ;
/*border:3px solid pink;*/
}
@media screen and (max-width: 550px) {
.boxsyousai {
display: none;
}
}
@media screen and (min-width: 551px) {
.boxsyousai {
font-size: 15px;
}
}
.boxsyousai1 {
margin: 5px;
width: 65%;
height: auto;
text-align: right;
display: inline-block;
font-family:"游ゴシック", serif;
/*font-family: "Arial", "メイリオ";*/
color: white ;
/*border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.boxsyousai1 {
display: none;
}
}
@media screen and (min-width: 551px) {
.boxsyousai1 {
}
}
.sadd {
display: inline-block;
position: relative;
width: 95%;
height: auto;
font-family:"KaiTi", serif;
color: white;
font-size: 1.0vw;
text-align: right;
text-decoration: none;
color: white ;
}
@media screen and (max-width: 550px) {
.sadd {
font-size: 3px;
display: none;
}
}
@media screen and (min-width: 551px) {
.sadd {
}
}
.boxsyousai2 {
margin: 5px;
width: 25%;
height: auto;
text-align: center;
display: inline-block;
font-family:"KaiTi", serif;
/*font-family: "Arial", "メイリオ";*/
background: green;*/
border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.boxsyousai2 {
display: none;
}
}
@media screen and (min-width: 551px) {
.boxsyousai2 {
font-size: 15px;
}
}
.boxsyousai2 {
background-color: green;
}
/* マウスオーバー時の背景色 */
.boxsyousai2:hover {
background-color: gray;
opacity: 0.6;
}
.syousai1{
display: inline-block;
position: relative;
width: 95%;
height: auto;
font-family:"KaiTi", serif;
color: white;
font-size: 1.2vw;
text-decoration: none;
color: white ;
}
@media screen and (max-width: 550px) {
.syousai1 {
font-size: 3px;
display: none;
}
}
@media screen and (min-width: 551px) {
.syousai1 {
}
}
.boxsyousai3 {
margin: 5px;
margin-left: 10px;
width: 100%;
height: auto;
text-align: center;
display: inline-block;
font-family:"KaiTi", serif;
/*font-family: "Arial", "メイリオ";*/
color: white ;
/*border:3px solid pink;*/
}
@media screen and (max-width: 550px) {
.boxsyousai3 {
display: none;
}
}
@media screen and (min-width: 551px) {
.boxsyousai3 {
font-size: 1.3vw;
}
}
.syousai{
margin-top: 5px;
display: inline-block;
position: relative;
width: 18%;
height:auto;
text-decoration: none;
font-size: 1.5vw;
text-align: center;
color: white;
background: #000000;*/
/*border:3px solid white;*/
}
@media screen and (max-width: 550px) {
.syousai {
font-size: 3px;
display: none;
}
}
@media screen and (min-width: 551px) {
.syousai {
}
}
.syousai:before{
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 3px;
background: green;
transform: scale(0, 8);
transition: 0.4s;
}
.syousai:hover:before {
transform: scale(1);
}
.syousai2{
margin-top: 5px;
display: inline-block;
position: relative;
width: 18%;
padding: 5px;
height:auto;
text-decoration: none;
font-size: 0.9vw;
text-align: center;
color: white;
background: #000000;*/
/*border:3px solid white;*/
}
@media screen and (max-width: 550px) {
.syousai2 {
font-size: 3px;
display: none;
}
}
@media screen and (min-width: 551px) {
.syousai2 {
}
}
.syousai2:before{
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 3px;
background: green;
transform: scale(0, 8);
transition: 0.4s;
}
.syousai2:hover:before {
transform: scale(1);
}
.boxhan {
display: inline-block;
width: 10%;
height:auto;
text-align: center;
font-family:"KaiTi", serif;
color:white ;
/*border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.boxhan {
}
}
@media screen and (min-width: 551px) {
.boxhan {
display: none;
}
}
.nav-drawer {
position: relative;
}
@media screen and (max-width: 550px) {
.nav-drawer {
}
}
@media screen and (min-width: 551px) {
.nav-drawer {
}
}
/*チェックボックス等は非表示に*/
.nav-unshown {
display:none;
}
/*アイコンのスペース*/
#nav-open {
display: inline-block;
width: 30px;
height: 22px;
vertical-align: middle;
}
/*ハンバーガーの形をCSSで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
position: absolute;
height: 5px;/*線の太さ*/
width: 40px;/*長さ*/
border-radius: 3px;
background: #555;
display: block;
content: '';
cursor: pointer;
}
#nav-open span:before {
bottom: -8px;
}
#nav-open span:after {
bottom: -16px;
}
/*閉じる用の薄黒箇所*/
#nav-close {
display: none;
position: fixed;
z-index: 99;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
transition: .3s ease-in-out;
}
/*メニューの中身*/
#nav-content {
overflow: auto;
position: fixed;
top: 0px;
left: 0px;
z-index: 9999;
width: 50%;
max-width: 330px;/*最大幅（お好みで調整を）*/
height: 100%;
background-color: rgba(0,151,167 ,1);
font-size: 20px;
color: black;
transition: .3s ease-in-out;
-webkit-transform: translateX(-105%);
transform: translateX(-105%);
}
/*チェックがついたら表示させる*/
#nav-input:checked ~ #nav-close {
display: block;
opacity: .3;
}
#nav-input:checked ~ #nav-content {
-webkit-transform: translateX(0%);
transform: translateX(0%);
box-shadow: 6px 0 25px rgba(0,0,0,.15);
}
.header-logo-menu{
display: flex;
display: -moz-flex;
display: -o-flex;
display: -webkit-flex;
display: -ms-flex;
flex-direction: row;
-moz-flex-direction: row;
-o-flex-direction: row;
-webkit-flex-direction: row;
-ms-flex-direction: row;
}
/*ロゴやサイトタイトルをセンタリング*/
.logo_area{
text-align:center;
margin:auto;
}
.nav {
margin-top: 80px;
width: 100%;
height: 50%;
font-family:"游ゴシック", " sans-serif";
text-align: center;
color: black;
/*border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.nav {
}
}
@media screen and (min-width: 551px) {
.nav {
font-size: 2.7vw;
}
}
.nav1 {
padding: 50px;
width: 100%;
height: 10%;
font-family:"游ゴシック", " sans-serif";
text-align: left;
color: white;
/*border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.nav1 {
}
}
@media screen and (min-width: 551px) {
.nav1 {
}
}
.navinfo {
margin-top: 80px;
width: 100%;
height: auto;
text-align: center;
font-size: 28px;
color: white;
font-weight: 700;
border-bottom: solid 5px white;
/*border:3px solid red;*/
}
@media screen and (max-width: 550px) {
.navinfo {
}
}
@media screen and (min-width: 551px) {
.navinfo {
font-size: 2.7vw;
}
}
.sample_p {
overflow: hidden;
width: 100px;
height: 182px;
color: white;
text-decoration: none;
font-weight: 700
/*border: 1px solid gray;*/
}
.sample_p img {
opacity: 0.9;
width: 150px;
transition: all 0.5s;
}
.sample_p img:hover {
opacity: 0.7;
transform: scale(1.2, 1.2);
z-index: 9999;
}
.body_photo{
padding: 50px 0 160px 0;
height: 380px;
/*height: 180px;*/
/*border:5px solid pink; */
}
@media screen and (max-width: 480px) {
.body_photo {
font-size: 5px;
}
}
@media screen and (min-width: 551px) {
.body_photo {
font-size: 15px;
}
}
.top_photo1 {
position:fixed;
overflow: hidden;
top: 80%;
margin: auto;
margin-left: 0%;
width:85%;
height: auto;
left:0%;
background-color:#eee;
/*border:3px solid blue;*/ /*日帰りのバーベキュー、*/
}
@media screen and (max-width: 480px) {
.top_photo1 {
width:100%;
}
}
@media screen and (min-width: 551px) {
.top_photo1 {
}
}
.top_photo_end {
position:absolute;
top: 0%;
width:80%;
height:auto;
left:10%;
font-family:"Monotype Corsiva", serif;
text-align: left;
font-style:oblique;
/*background-color:#eee;*/
font-size: 12px;
/*border:2px solid green;*/
}
@media screen and (max-width: 480px) {
.top_photo_end {
}
}
@media screen and (min-width: 551px) {
.top_photo_end {
}
}
.top_photo {
position:relative;
margin-top: 37%;
width:100%;
height:15%;
left:0%;
/*border: 5px solid red;*/
}
@media screen and (max-width: 480px) {
.top_photo {
margin-top: 97%;
}
}
@media screen and (min-width: 551px) {
.top_photo {
}
}
.top_photo_start {
width: 100%;
height: auto;
font-size: 1.0vw;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
background-image: url("message/17_top_hana02.png");
/*border: 1px solid red;*/
}
@media screen and (max-width: 480px) {
.top_photo_start {
width: 80%;
left: 1%;
font-size: 3.3vw;
color:black;
}
}
@media screen and (min-width: 551px) {
.top_photo_start {
}
}
.topber{
width:100%;
height: auto;
/*border: 1px solid black;*/
}
.topber > .topber_img{
/*display: inline-block;*/
width: 100%;
}
@media screen and (max-width: 550px) {
.topber {
}
.topber_img{
height:5px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.topber {
width: 100%;
}
.topber_img{
}
}
.start1 {
display: inline-block;
width:100%;
left:0%;
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.start1 {
}
}
@media screen and (min-width: 551px) {
.start1 {
}
}
.start2 {
display: inline-block;
vertical-align: top;
margin-top: 50px;
margin-left:5px;
width: 40%;
height:auto;
color:black;
font-size: 1.8vw;
font-weight: 500;
color:#622d18;
/*border: 5px solid red;*/
}
@media screen and (max-width: 480px) {
.start2 {
display: none;
padding: 30px 20px;
margin-left:20px;
margin-top: 250px;
width: 80%;
color:green;
font-size: 4.6vw;
}
}
@media screen and (min-width: 551px) {
.start2 {
padding: 10px 10px;
}
}
.start3{
display: inline-block;
width:23%;
height:auto;
/*border: 1px solid red;*/
}
@media screen and (max-width: 480px) {
.start3 {
width: 97%;
text-align: center;
color:brown;
font-size: 3.4vw;
}
}
@media screen and (min-width: 551px) {
.start3 {
}
}
.indeximg{
margin-left: 55px;
width:90%;
height: auto;
/*border: 1px solid black;*/
}
.indeximg > .indeximg_img{
/*display: inline-block;*/
width: 90%;
}
@media screen and (max-width: 550px) {
.indeximg {
margin-left: 25px;
}
.indeximg_img{
}
}
@media screen and (min-width: 551px) {
.indeximg {
}
.indeximg_img{
}
}
.top_frame1 {
position:fixed;
overflow: hidden;
top: 1%;
width: 100%;
height: 80%;
/*border: 5px solid yellow;*/
}
@media screen and (max-width: 480px) {
.top_frame1 {
height: 75%;
}
}
@media screen and (min-width: 551px) {
.top_frame1 {
}
}
.photo1a,.photo2a,.photo3a,.photo4a ,.photo5a{
position: absolute;
width: 100%;
height: auto;
z-index:10;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.photo1a {
position: absolute;
float: left;
width: 100%;
height: auto;
}
.photo1a > .photo1a_img {
/*display: inline-block;*/
/*text-align: center;*/
width: 100%;
}
@media screen and (max-width: 480px) {
.photo1a {
}
.photo1a_img{
height: 400px; /*500*/
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.photo1a {
}
.photo1a_img{
width: 100%;
height: 650px;
object-fit: contain;
}
}
.photo2a {
position: absolute;
float: left;
width: 100%;
height: auto;
}
.photo2a > .photo2a_img {
/*display: inline-block;*/
/*text-align: center;*/
width: 100%;
}
@media screen and (max-width: 480px) {
.photo2a {
}
.photo2a_img{
height: 400px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.photo2a {
}
.photo2a_img{
height: 650px;
/*object-fit: cover;*/
object-position: 20px 5px;
}
}
.photo3a {
position: absolute;
float: left;
width: 100%;
height: auto;
}
.photo3a > .photo3a_img {
/*display: inline-block;*/
/*text-align: center;*/
width: 100%;
}
@media screen and (max-width: 480px) {
.photo3a {
}
.photo3a_img{
height: 400px; /*height: auto;*/
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.photo3a {
}
.photo3a_img{
/*height: auto;*
/*object-fit: cover;*/
/*object-position: 0px 5px;*/
width: 100%;
height: 650px;
object-fit: cover;
}
}
.photo4a {
position: absolute;
float: left;
width: 100%;
height: auto;
}
.photo4a > .photo4a_img {
/*display: inline-block;*/
/*text-align: center;*/
width: 100%;
}
@media screen and (max-width: 480px) {
.photo4a {
}
.photo4a_img{
height: 400px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.photo4a {
}
.photo4a_img{
height: 650px;
/*object-fit: cover;*/
object-position: 0px 5px;
}
}
.photo5a {
position: absolute;
top:5%;
float: left;
width: 100%;
height: auto;
}
.photo5a > .photo5a_img {
/*display: inline-block;*/
/*text-align: center;*/
width: 100%;
}
@media screen and (max-width: 480px) {
.photo5a {
}
.photo5a_img{
height: 400px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.photo5a {
}
.photo5a_img{
width: 100%;
height: 800px;
object-fit: cover;
}
}
.photo1a_img,.photo2a_img,.photo3a_img,.photo4a_img,.photo5a_img {
opacity:0;
-webkit-animation: Anime 45s linear infinite 0s;
-moz-animation: Anime 45s linear infinite 0s;
animation: Anime 45s linear infinite 0s;
}
.photo1a_img {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.photo2a_img {
-webkit-animation-delay: 9s;
animation-delay: 9s;
}
.photo3a_img {
-webkit-animation-delay: 18s;
animation-delay: 18s;
}
.photo4a_img {
-webkit-animation-delay: 27s;
animation-delay: 27s;
}
.photo5a_img {
-webkit-animation-delay: 36s;
animation-delay: 36s;
}
@keyframes Anime {
0% {
opacity: 0;
}
6% {
opacity: 1;
transform: scale(1.17);
}
18% {
opacity: 1;
transform: scale(1.25);
}
32% {
opacity: 0;
transform: scale(1.25);
}
45% {
opacity: 0;
transform: scale(1.25);
}
100% { opacity: 0 }
}
.home_base{
position:absolute;
margin-top: 28%;
width:100%;
height:auto; /*100%*/
background-color: white;
/*border:5px solid green;*/
}
@media screen and (max-width: 550px) {
.home_base {
margin-top: 45%;
width: 100%
height:auto;
}
}
@media screen and (min-width: 551px) {
.home_base {
}
}
.baseber{
width:100%;
height: auto;
/*border: 1px solid black;*/
}
.baseber > .ber_img{
/*display: inline-block;*/
text-align: center;
width: 100%;
}
@media screen and (max-width: 550px) {
.baseber {
}
.ber_img{
height:5px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.baseber {
}
.ber_img{
height:5px;
object-fit: cover;
}
}
.info_box {
/*position: absolute;*/
margin: 20px 0px 0px 0px;*/
width: 100%;
height:auto;
/*border:1px solid brown;*/
}
@media screen and (max-width: 550px) {
.info_box {
margin: 10px 0px 0px 0px;*/
}
}
@media screen and (min-width: 551px) {
.info_box {
}
}
.info_f2 {
/*position: absolute;*/
/*margin: 15px ;*/
padding: 20px 20px;
width: 90%;
height:auto;
left: 20%;
font-family:"Monotype Corsiva", serif;
font-weight: 600;
text-align: center;
font-style:oblique;
font-size: 2.1vw;
color: #622d18;
/*border:1px solid blue;*/
}
@media screen and (max-width: 550px) {
.info_f2 {
padding: 10px 5px;
margin-top: 10px;
width: 90%;
font-size: 6.3vw;
font-weight: 500;
color: #622d18;
line-height:35px;
}
}
@media screen and (min-width: 551px) {
.info_f2 {
width: 85%;
}
}
.info6c {
display: inline-block;
margin-top: 0px;
width: 55%;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-weight: 400;
text-align: center;
font-size: 1.2vw;
color: green;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.info6c {
padding: 10px 10px;
line-height:30px;
font-size: 3.8vw;
width:73%;
text-align: left;
}
}
@media screen and (min-width: 551px) {
.info6c {
}
}
.info6c2 {
display: inline-block;
margin-top: 30px;
width: 65%;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-weight: 400;
text-align: center;
font-size: 1.3vw;
color: #4753a2;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.info6c2 {
padding: 10px 10px;
line-height:25px;
font-size: 4.2vw;
width:73%;
}
}
@media screen and (min-width: 551px) {
.info6c2 {
}
}
.snsbox3 {
width: 100%;
height: auto;
display: inline-block;
font-family:"Monotype Corsiva", serif;
font-size: 2.0vw;
font-weight: 500;
color: darkslategray;
/*font-style:oblique;*/
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox3 {
width: 95%;
}
}
@media screen and (min-width: 551px) {
.snsbox3 {
}
}
.centerin {
/*padding: 30px 50px;*/
width: 30%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-weight: 600;
color: darkslategray;
font-size: 4.0vw;
border-bottom: solid 3px #3c6d49;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.centerin {
width: 70%;
font-size: 8.5vw;
font-weight: 500;
}
}
@media screen and (min-width: 551px) {
.centerin {
}
}
.inbox3c {
width: 75%;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-size: 17px;
color: darkslategray;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.inbox3c {
padding: 3px;
font-size: 12px;
width: 79%;
}
}
@media screen and (min-width: 551px) {
.inbox3c {
}
}
.snsmain1 {
margin-top: 35px;
width: 99%;
height: auto;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.snsmain1 {
margin-top: 10px;
}
}
@media screen and (min-width: 551px) {
.snsmain1 {
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*background: linear-gradient(45deg, #000000, #e7e7e7);*/
}
}
.snsbox4a{
position: absolute;
margin-top: 20px;
margin-left: 58%;
width: 28%;
height: auto;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox4a {
margin-top: 310px;
width:14%;
margin-left: 307px;
}
}
@media screen and (min-width: 551px) {
.snsbox4a{
}
}
.snsphoto2 {
margin-top: 10px;
width: 20%;
height: 250px;
background-color: green;
border: 5px solid green;*/
}
@media screen and (max-width: 550px) {
}
}
@media screen and (min-width: 551px) {
.snsphoto2 {
}
}
.home2_2b1 {
margin-top: 100px;
width:98%;
height: auto;
display: inline-block;
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.snhome2_2b1 {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.home2_2b1 {
}
}
.info_1{
width: 95%;
height: auto;
left: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
/*border: 5px solid green;*/
}
@media screen and (max-width: 550px) {
.info_1 {
}
}
@media screen and (min-width: 551px) {
.info_1 {
}
}
.photo_w {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: hidden;
width: 100%;
height: 30vh;
}
.photo_w .photow1 {
position: relative;
visibility: visible;
overflow: hidden;
top:2%;
width: 30%;
cursor: pointer;
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 5px solid white;*/
}
.photo_w .photow1:nth-child(1) {
background-image: url("21_folder/20_senmen02.png");
}
.photo_w .photow1:nth-child(2) {
background-image: url("21_folder/20_bath03.jpg");
}
.photo_w .photow1:nth-child(3) {
background-image: url("21_folder/20_Ataip.jpg");
}
.photo_w .photow1:nth-child(4) {
background-image: url('21_folder/20230819_191534 (2).jpg');
}
.photo_w .photow1:after {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 80%;
content: '';
opacity: 0;
background-color: rgba(255,204,128 ,0.2);
}
.photo_w:hover .photow1:hover:after {
visibility: visible;
-webkit-transition: all 0.2s linear 0.4s;
transition: all 0.2s linear 0.4s;
opacity: 1;
}
.photo_w:hover .photow1:hover {
width: 35%;
}
.photo_w .photow1 .photow2 {
position: absolute;
z-index: 4;
bottom:25px;
top:20px;
left: 10px;
visibility: hidden;
max-width: 400px;
padding: 20px;
-webkit-transform: scale(0.85);
transform: scale(0.85);
color: #ffffff;
border-radius: 5px;
background-color: rgba(0,0,49,0.3);
}
.photo_w .photow1 .photow2 h2 {
font-size: 1.4em;
}
.photo_w:hover .photow1:hover .photow2 {
visibility: visible;
-webkit-transition: all 0.2s linear 0.7s;
transition: all 0.2s linear 0.7s;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
@media only screen and (max-width:551px) {
.photo_w {
height: 80px;
}
.photo_w .photow1 .photow2 h2 {
font-size: 0.9px;
}
.photo_w .photow1 .photow2 p {
font-size: 0.7px;
}
.photo_w .photow1 .photow2 {
right: 10px;
bottom: 10px;
left: 10px;
}
.photo_w:hover .photow1:hover .photow2 {
left: 10px;
}
}
.photo_wr {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: hidden;
width: 100%;
height: 30vh;
}
.photo_wr .photow1a {
position: relative;
visibility: visible;
overflow: hidden;
top:2%;
width: 30%;
cursor: pointer;
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 5px solid white;*/
}
.photo_wr .photow1a:nth-child(1) {
background-image: url("21_folder/20220401_3.jpg");
}
.photo_wr .photow1a:nth-child(2) {
background-image: url("21_folder/room_19824_a.jpg");
}
.photo_wr .photow1a:nth-child(3) {
background-image: url("21_folder/20240421_152240a.jpg");
}
.photo_wr .photow1a:nth-child(4) {
background-image: url('21_folder/20230402_1.jpg');
}
.photo_wr .photow1a:after {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 80%;
content: '';
opacity: 0;
background-color: rgba(255,204,128 ,0.2);
}
.photo_wr:hover .photow1a:hover:after {
visibility: visible;
-webkit-transition: all 0.2s linear 0.4s;
transition: all 0.2s linear 0.4s;
opacity: 1;
}
.photo_wr:hover .photow1a:hover {
width: 35%;
}
.photo_wr .photow1a .photow2a {
position: absolute;
z-index: 4;
bottom:25px;
top:20px;
left: 10px;
visibility: hidden;
max-width: 400px;
padding: 20px;
-webkit-transform: scale(0.85);
transform: scale(0.85);
color: #ffffff;
border-radius: 5px;
background-color: rgba(0,0,49,0.3);
}
.photo_wr .photow1a .photow2a h2 {
font-size: 1.4em;
}
.photo_wr:hover .photow1a:hover .photow2a {
visibility: visible;
-webkit-transition: all 0.2s linear 0.7s;
transition: all 0.2s linear 0.7s;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
@media only screen and (max-width:551px) {
.photo_wr {
height: 80px;
}
.photo_wr .photow1a .photow2a h2 {
font-size: 0.9px;
}
.photo_wr .photow1a .photow2a p {
font-size: 0.7px;
}
.photo_wr .photow1a .photow2a {
right: 10px;
bottom: 10px;
left: 10px;
}
.photo_wr:hover .photow1a:hover .photow2a {
left: 10px;
}
}
.snsbox4 {
display: inline-block;
margin-top:50px;
width: 41%;
height: auto;
text-align: center;
background: -moz-linear-gradient(top left, #f5f5f5 , #FFF, #FFC778);
background: -webkit-linear-gradient(top left, #f5f5f5 , #FFF, #FFC778);
background: linear-gradient(top left, #f5f5f5 ,#FFF, #FFC778); /*border: 3px solid red;*/
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox4 {
width: 95%;
}
}
@media screen and (min-width: 551px) {
.snsbox4 {
}
}
.snsphoto1 {
margin-top: 20px;
margin: 80px;
width: 75%;
height: auto;
/*border: 5px solid green;*/
}
.snsphoto1 > .snsphoto1_img{
/*display: inline-block;*/
text-align: right;
width: 95%;
/*transition: 1s;*/
}
@media screen and (max-width: 550px) {
.snsphoto1 {
width: 100%;
margin: 2px;
}
.snsphoto1_img{
}
}
@media screen and (min-width: 551px) {
.snsphoto1 {
}
.snsphoto1_img {
/*border-radius: 50%;*/
/*.snsphoto1_img:hover{*/
/*transform: scale(1.1);*/
}
}
.snsphoto21a {
position: absolute;
margin-top: 450px;
margin-left: 200px;
width:18%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-size: 1.2vw;
font-weight: 400;
color: gray;
font-weight: 500;
/*font-style:oblique;*/
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsphoto21a {
margin-top: 75%;
margin-left: 5%:
width:60%;
font-size: 3.8vw;
color: gray;
}
}
@media screen and (min-width: 551px) {
.snsphoto21a {
}
}
.snsbox5 {
display: inline-block;
margin-top: 20px;
width:58%;
height: auto;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox5 {
width: 95%;
}
}
@media screen and (min-width: 551px) {
.snsbox5 {
}
}
.snsbox5a1 {
display: inline-block;
margin-top:5px;
margin-left:55px;
padding: 1%;
width:80%;
height: auto;
background-color: #EEE;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox5a1 {
margin-top: 50px;
margin-left: 0px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.snsbox5a1 {
}
}
.text {
margin-bottom: 150px;
}
.element {
/* 最初は非表示 */
transform: translateY(30px);
opacity: 0;
visibility: hidden;
transition: transform 1s, opacity 1s, visibility 1s;
/* （装飾用スタイル） */
width:100%;
height: auto;
background-color: white;
}
/* フェードイン時に入るクラス */
.is-fadein {
transform: translateX(0);
opacity: 1;
visibility: visible;
}
.inbox3b {
display: inline-block;
margin: 15px;
width: 85%;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-size: 1.8vw;
font-weight: 600;
color: #622d18;
font-style:oblique;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.inbox3b {
width: 65%;
margin-top: 25px;
font-size: 6.3vw;
}
}
@media screen and (min-width: 551px) {
.inbox3b {
}
}
.inbox3b1 {
display: inline-block;
margin: 5px;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-size: 1.5vw;
font-weight: 500;
color: #622d18;
font-style:oblique;
/*border: 3px solid yellow;*/
}
@media screen and (max-width: 550px) {
.inbox3b1 {
width:99%;
margin-top: 15px;
font-size: 5.0vw;
text-align: center;
}
}
@media screen and (min-width: 551px) {
.inbox3b1 {
}
}
.rightbox {
display: inline-block;
margin: 15px;
width:43%;
height: auto;
left:45%;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-size: 1.8vw;
font-weight: 600;
color: green;
font-style:oblique;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.rightbox {
width: 98%;
margin-top: 25px;
margin: 0px;
font-size: 5.5vw;
}
}
@media screen and (min-width: 551px) {
.rightbox {
}
}
.inphoto4 {
display: inline-block;
width: 25%;
height: auto;
margin-left: -150px;
font-family:"游ゴシック", serif;
color: white;
text-align: right;
/*border: 1px solid blue;*/
}
.inphoto4 > .inphoto4_img{
/*display: inline-block;*/
text-align: right;
width: 30%;
/*transition: 1s;*/
}
@media screen and (max-width: 550px) {
.inphoto4 {
margin-top: 10px;
width: 100%;
margin-left: 0px;
}
.inphoto4_img{
}
}
@media screen and (min-width: 551px) {
.inphoto4 {
margin-right: 50px;
}
.inphoto4_img{
}
}
.inphoto4b {
display: inline-block;
width: 55%;
height: auto;
margin-left: -150px;
font-family:"游ゴシック", serif;
color: white;
text-align: right;
/*border: 1px solid blue;*/
}
.inphoto4b > .inphoto4b_img{
/*display: inline-block;*/
text-align: right;
width: 30%;
/*transition: 1s;*/
}
@media screen and (max-width: 550px) {
.inphoto4b {
width: 30%;
margin-left: 5px;
}
.inphoto4b_img{
}
}
@media screen and (min-width: 551px) {
.inphoto4b {
margin-right: 50px;
}
.inphoto4b_img{
}
}
.inphoto4c {
display: inline-block;
margin-top: 3px;
width: 100%;
height: auto;
margin-left: 50px;
font-family:"游ゴシック", serif;
color: white;
font-size: 13px;
text-align: right;
/*border: 1px solid blue;*/
}
.inphoto4c > .inphoto4c_img{
/*display: inline-block;*/
text-align: right;
width: 80%;
/*transition: 1s;*/
}
@media screen and (max-width: 550px) {
.inphoto4c {
width: 30%;
margin-left: 5px;
}
.inphoto4c_img{
}
}
@media screen and (min-width: 551px) {
.inphoto4c {
margin-right: 50px;
}
.inphoto4c_img{
}
}
.inbox3b2 {
display: inline-block;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-size: 1.2vw;
font-weight: 400;
color: green;
font-style:oblique;
/*border: 3px solid yellow;*/
}
@media screen and (max-width: 550px) {
.inbox3b2 {
width:100%;
margin-top: 15px;
line-height:25px;
font-size: 4.6vw;
text-align: center;
}
}
@media screen and (min-width: 551px) {
.inbox3b2 {
}
}
.snsbox5a1b {
display: inline-block;
margin-top: 50px;
width:45%;
height: auto;
background-color: white;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.snsbox5a1b {
width: 85%;
}
}
@media screen and (min-width: 551px) {
.snsbox5a1b {
}
}
.inphoto4a {
display: inline-block;
margin-top: 10px;
margin-left: 13px;
width: 80%;
height: auto;
background: -moz-linear-gradient(top right, #FFF, #FFC778);
background: -webkit-linear-gradient(top right, #FFF, #FFC778);
background: linear-gradient(to bottom left, #FFF, #FFC778); */ text-align: left;
/*border: 1px solid blue;*/
}
.inphoto4a > .inphoto4a_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
transition: 1s;
}
@media screen and (max-width: 550px) {
.inphoto4a {
width: 90%;
}
.inphoto4a_img{
}
}
@media screen and (min-width: 551px) {
.inphoto4a {
}
.inphoto4a_img:hover{
transform: scale(1.3);
}
}
.mainbox2 {
display: inline-block;
vertical-align: top;
margin-top: 10px;
width: 100%;
height: auto;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.mainbox2 {
width: 95%;
}
}
@media screen and (min-width: 551px) {
.mainbox2 {
}
}
.centerbox {
display: inline-block;
padding: 20px 2px;
margin-top: 50px;
width: 90%;
height: auto;
border: 2px solid #eee;
}
@media screen and (max-width: 550px) {
.centerbox {
margin-top: 25px;
width: 98%;
}
}
@media screen and (min-width: 551px) {
.centerbox {
}
}
.infocenter {
/*padding: 40px 0px 30px 0px;*/
display: inline-block;
margin-top: 25px;
width: 35%;
height: 40px;
font-family:"Monotype Corsiva", serif;
font-size: 2.0vw;
color: midnightblue;
text-shadow:-1px -1px 3px midnightblue;
/*text-shadow:-1px -1px 3px darkslategray;*/
font-style:oblique;
/*border-bottom: solid 2px #3c6d49;*/
/*color: darkslategray;*/
background: linear-gradient(45deg,#387d39, #387d39, #bee0c2, #dbebc4);
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.infocenter {
margin-top: px;
width: 80%;
}
}
@media screen and (min-width: 551px) {
.infocenter {
}
}
.inphoto4ab {
display: inline-block;
margin-top: 0px;
margin-left: 13px;
width: 80%;
height: auto;
font-family:"游ゴシック", serif;
color: white;
/*border: 1px solid blue;*/
}
.inphoto4ab > .inphoto4ab_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
transition: 1s;
}
@media screen and (max-width: 550px) {
.inphoto4ab {
margin-top: 5px;
width: 70%;
}
.inphoto4ab_img{
}
}
@media screen and (min-width: 551px) {
.inphoto4ab {
}
.inphoto4ab_img:hover{
transform: scale(1.3);
}
}
.info71 {
/*padding: 40px 0px 30px 0px;*/
display: inline-block;
margin-left:50px;
width:50%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-size: 2.3vw;
font-weight: 400;
color: #26499d;
text-shadow:-1px -1px 3px #4753a2;
/*text-shadow:-1px -1px 3px darkslategray;*/
font-style:oblique;
/*border-bottom: solid 2px #3c6d49;*/
/*color: darkslategray;*/
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.info71 {
margin-top: 10px;
margin-left:0px;
width:90%;
font-size: 6.5vw;
color: white;
line-height:40px;
background: linear-gradient(45deg, #dbebc4,#387d39, #387d39, #bee0c2);*/
}
}
@media screen and (min-width: 551px) {
.info71 {
}
}
.p{
text-align: center;
margin: 10px 0;
font-size:6.8vw;
}
@media screen and (max-width: 550px) {
.p {
margin-top: 20px;
width: 90%;
font-size: 6.0vw;
line-height:25px;
}
}
@media screen and (min-width: 551px) {
.p {
}
}
/*========= 1文字ずつ出現させるためのCSS ===============*/
.sboxmo2 span{
opacity: 0;
}
.sboxmo2.appeartext span{ animation:text_anime_on 2s ease-out forwards; }
@keyframes text_anime_on {
0% {opacity:0;}
100% {opacity:1;}
/*5% {opacity:0;}
80% {opacity:1;}*/
}
.sbox6a {
display: inline-block;
width: 35%;
height: auto;
font-size: 3.0vw;
font-family:"Monotype Corsiva", serif;
/*border-bottom: solid 3px #3c6d49;*/
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.sbox6a {
width: 100%;
font-size: 6.5vw;
font-weight: 700;
}
}
@media screen and (min-width: 551px) {
.sbox6a {
}
}
.sbox6a1 {
display: inline-block;
margin-top: 60px;
margin-left: 0px;
width: 80%;
height: auto;
font-size: 3.0vw;
font-family:"Monotype Corsiva", serif;
/*border-bottom: solid 3px #3c6d49;*/
background: linear-gradient(90deg,#387d39, #bee0c2,#387d39, #dbebc4);*/
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.sbox6a1 {
width: 100%;
font-size: 6.5vw;
font-weight: 700;
background: white;
}
}
@media screen and (min-width: 551px) {
.sbox6a1 {
}
}
.sboxmo1 {
display: inline-block;
width: 30%;
height: auto;
/*font-family:"游ゴシック", serif;*/
/*font-family: 'Kosugi', sans-serif;*/
font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";*/
/*font-family:'Sacramento', cursive;*/
font-size: 2.0vw;
font-weight: 600;
/*color: midnightblue;*/
text-shadow:-1px -1px 3px white;
text-align: left;
font-style:oblique;
border-bottom: solid 5px #3c6d49;
background-color: white;
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.sboxmo1 {
width: 75%;
font-size: 9.5vw;
font-weight: 700;
color: #622d18;
text-align: center;
line-height: 55px;
border-bottom: solid 3px #3c6d49;
}
}
@media screen and (min-width: 551px) {
.sboxmo1 {
}
}
.infobox6 {
display: inline-block;
margin-top: 30px;
width: 80%;
height: auto;
color: darkslategray;
font-family:"游ゴシック", serif;
/*font-style:oblique;*/
font-size: 1.1vw;
background-color: #eee;
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.infobox6 {
width: 100%;
margin-top: 25px;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.infobox6 {
}
}
.in1box {
display: inline-block;
margin-top:25px;
margin-left: 3px;
width: 38%;
height: auto;
color: darkslategray;
font-family:"游ゴシック", serif;
/*font-style:oblique;*/
font-size: 1.1vw;
/*border: 1px solid darkslategray;*/
}
@media screen and (max-width: 550px) {
.in1box {
width: 42%;
padding-left: 5px 15px 5px 15px;
margin-top: 15px;
font-size: 3.9vw;
}
}
@media screen and (min-width: 551px) {
.in1box {
}
}
.info7a {
/*padding: 40px 0px 30px 0px;*/
display: inline-block;
padding: 2px;
width: 100%;
height: auto;
font-family:"游ゴシック", serif;
/*font-family:"Monotype Corsiva", serif;*/
text-align: center;
font-size: 1.2vw;
font-weight: 500;
color: darkslategray;
/*font-style:oblique;*/
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.info7a {
width: 100%;
font-size: 3.8vw;
font-family:"游ゴシック", serif;
}
}
@media screen and (min-width: 551px) {
.info7a {
}
}
.boxright {
display: inline-block;
vertical-align: top;
width:63%;
height: auto;
font-family:"游ゴシック", serif;
color: darkslategray;
font-size: 1.0vw;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.boxright {
width:100%;
}
}
@media screen and (min-width: 551px) {
.boxright {
}
}
.info6b1 {
display: inline-block;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-weight: 600;
text-align: center;
font-style:oblique;
font-size: 1.4vw;
color: green;
/*background-color: #f4fff4;*/
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.info6b1 {
font-size: 3.5vw;
width: 100%;
}
}
@media screen and (min-width: 551px) {
.info6b1 {
}
}
.inphoto5 {
display: inline-block;
margin : 20px 1px 20px 1px;
width:37%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: left;
font-size: 2.2vw;
color: green;
/*border: 3px solid green;*/
}
.inphoto5 > .inphoto5_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
transition: 1s;
}
@media screen and (max-width: 550px) {
.inphoto5 {
margin-top:50px;
width: 85%;
}
.inphoto5_img{
}
}
@media screen and (min-width: 551px) {
.inphoto5 {
margin-right: 50px;
}
.inphoto5_img:hover{
/*transform: scale(1.3);*/
}
}
.inbox5a2 {
display: inline-block;
margin-top: 20px;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-size: 1.0vw;
text-align: center;
font-weight: 600;
color: #5f6527;
background: -moz-linear-gradient(top left, #f5f5f5 , #FFF, #FFC778);
background: -webkit-linear-gradient(top left, #f5f5f5 , #FFF, #FFC778);
background: linear-gradient(to bottom right, #f5f5f5 ,#FFF, #FFC778); /*border: 3px solid red;*/
/*border: 2px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5a2 {
margin-top: 20px;
width: 90%;
font-size: 4.0vw;
background-color: #eee;
}
}
@media screen and (min-width: 551px) {
.inbox5a2 {
}
}
.inbox5a3 {
display: inline-block;
padding: 0px 20px;
width: 80%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-size: 1.3vw;
text-align: center;
font-weight: 400;
color: #4e454a;
text-shadow:-1px -1px 1px #941f57;
background: -moz-linear-gradient(top left, #f5f5f5 , #FFF, #b0778c);
background: -webkit-linear-gradient(top left, #f5f5f5 , #FFF, #b0778c);
background: linear-gradient(to bottom right, #f5f5f5 ,#FFF, #b0778c); /*border: 3px solid red;*/
border: 1px solid #eee;*/
}
@media screen and (max-width: 550px) {
.inbox5a3 {
margin-top: 20px 0px;
margin-left: 15px;
width: 85%;
font-size: 4.1vw;
background-color: #202f55;
}
}
@media screen and (min-width: 551px) {
.inbox5a3 {
}
}
.info7 {
/*padding: 40px 0px 30px 0px;*/
display: inline-block;
margin-top: 25px;
width: 30%;
height: auto;
font-family:"KaiTi", serif;
/*font-family:"Monotype Corsiva", serif;
/*font-family: 'Kosugi', sans-serif;*/
/*font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";*/
/*font-family:'Sacramento', cursive;*/
font-size: 2.5vw;
color: #e73562;
font-weight: 700;
text-shadow:-1px -1px 3px #e73562;
text-align: center;
font-style:oblique;
background-color: #FFC778;
/*border-bottom: solid 2px #3c6d49;*/
/*color: darkslategray;*/
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.info7 {
margin-top: 75px;
width: 85%;
font-size: 8.5vw;
}
}
@media screen and (min-width: 551px) {
.info7 {
}
}
.info6 {
padding: 50px 5px;
width: 65%;
height:auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-size: 1.5vw;
font-weight: 600;
color: brown;
/*border: 2px solid blue;*/
}
@media screen and (max-width: 550px) {
.info6 {
padding: 0px 0px;
width: 95%;
margin-top: 25px;
font-size: 3.8vw;
}
}
@media screen and (min-width: 551px) {
.info6 {
}
}
.info6a {
margin-top: 5px;
width: 100%;
height: 100px;
font-family:"Monotype Corsiva", serif;
/*font-style:oblique;*/
line-height: 40px;
font-size: 1.2vw;
font-weight: 500;
/*background: linear-gradient(50deg,#f0f8ff, #bee0c2,#387d39, #dbebc4 ,#387d39);*/
background: -moz-linear-gradient(top left, #d3d3d3 , #FFF, #FFC778);
background: -webkit-linear-gradient(top left, #d3d3d3 , #FFF, #FFC778);
background: linear-gradient(to bottom right, #d3d3d3 ,#FFF, #FFC778); /*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.info6a {
width: 100%;
font-size: 4.6vw;
height: 50px;
color: #4753a2;
background: -moz-linear-gradient(top left, #f5f5f5 , #FFF, #FFC778);
background: -webkit-linear-gradient(top left, #f5f5f5 , #FFF, #FFC778);
background: linear-gradient(top left, #f5f5f5 ,#FFF, #FFC778); /*border: 3px solid red;*/
}
}
@media screen and (min-width: 551px) {
.info6a {
color: #4753a2;
font-style:oblique;
}
}
.info6b {
position: absolute;
margin-left:40px;
width: 33%;
height: 48px;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-size: 1.5vw;
font-weight: 600;
color: brown;
background-color: white;
/*border: 5px solid green;*/
}
@media screen and (max-width: 550px) {
.info6b {
margin-left:5px;
width: 90%;
margin-top: 10px;
font-size: 4.8vw;
}
}
@media screen and (min-width: 551px) {
.info6b {
}
}
.info6bb1 {
margin-top: 50px;
width: 77%;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;*/
text-align: center;
font-weight: 400;
/*font-style:oblique;*/
font-size: 1.1vw;
color: darkslategray;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.info6bb1 {
width: 83%;
font-size: 3.8vw;
}
}
@media screen and (min-width: 551px) {
.info6bb1 {
}
}
.info6ba {
margin:0px 55px;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 1.5vw;
font-weight: 500;
color: #4753a2;
/*color: #622d18;*/
/*border: 2px solid red;*/
}
@media screen and (max-width: 550px) {
.info6ba {
margin-top: 10px;
margin:20px 5px;
width: 98%;
font-size: 4.8vw;
}
}
@media screen and (min-width: 551px) {
.info6ba {
}
}
.center_box {
display: inline-block;
padding: 20px 2px;
margin-top: 50px;
width: 90%;
height: auto;
border: 2px solid #eee;
}
@media screen and (max-width: 550px) {
.center_box {
margin-top: 100px;
width: 98%;
}
}
@media screen and (min-width: 551px) {
.center_box {
}
}
.info_1{
width: 95%;
height: auto;
left: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
/*border: 5px solid green;*/
}
@media screen and (max-width: 550px) {
.info_1 {
}
}
@media screen and (min-width: 551px) {
.info_1 {
}
}
.photo_w {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
visibility: hidden;
width: 100%;
height: 30vh;
}
.photo_w .photow1 {
position: relative;
visibility: visible;
overflow: hidden;
top:2%;
width: 30%;
cursor: pointer;
-webkit-transition: all 0.3s linear 0s;
transition: all 0.3s linear 0s;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border: 5px solid white;*/
}
.photo_w .photow1:nth-child(1) {
background-image: url("21_folder/20220401_3.jpg");
}
.photo_w .photow1:nth-child(2) {
background-image: url("21_folder/room_19824_a.jpg");
}
.photo_w .photow1:nth-child(3) {
background-image: url('21_folder/2109bbqs.jpg');
}
.photo_w .photow1:nth-child(4) {
background-image: url('21_folder/2109bcafe1.jpg');
}
.photo_w .photow1:after {
position: absolute;
z-index: 2;
top: 0;
left: 0;
display: block;
width: 100%;
height: 80%;
content: '';
opacity: 0;
background-color: rgba(255,204,128 ,0.2);
}
.photo_w:hover .photow1:hover:after {
visibility: visible;
-webkit-transition: all 0.2s linear 0.4s;
transition: all 0.2s linear 0.4s;
opacity: 1;
}
.photo_w:hover .photow1:hover {
width: 35%;
}
.photo_w .photow1 .photow2 {
position: absolute;
z-index: 4;
bottom:25px;
top:20px;
left: 10px;
visibility: hidden;
max-width: 400px;
padding: 20px;
-webkit-transform: scale(0.85);
transform: scale(0.85);
color: #ffffff;
border-radius: 5px;
background-color: rgba(0,0,49,0.3);
}
.photo_w .photow1 .photow2 h2 {
font-size: 1.4em;
}
.photo_w:hover .photow1:hover .photow2 {
visibility: visible;
-webkit-transition: all 0.2s linear 0.7s;
transition: all 0.2s linear 0.7s;
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}
@media only screen and (max-width:551px) {
.photo_w {
height: 80px;
}
.photo_w .photow1 .photow2 h2 {
font-size: 0.9px;
}
.photo_w .photow1 .photow2 p {
font-size: 0.7px;
}
.photo_w .photow1 .photow2 {
right: 10px;
bottom: 10px;
left: 10px;
}
.photo_w:hover .photow1:hover .photow2 {
left: 10px;
}
}
.snsbox6 {
margin-top: 15px;
width:95%;
height: auto;
/*background: linear-gradient( #a7d28d, #e7e7e7, #192f60, #192f60);*/
border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox6 {
margin-top: 0px;
width: 90%;
}
}
@media screen and (min-width: 551px) {
.snsbox6 {
}
}
.centerin1 {
/*padding: 30px 50px;*/
width: 60%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-weight: 600;
color: darkslategray;
font-size: 4.0vw;
border-bottom: solid 3px #3c6d49;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.centerin1 {
width: 70%;
font-size: 8.5vw;
font-weight: 700;
margin-top: 50px;
}
}
@media screen and (min-width: 551px) {
.centerin1 {
}
}
.home2_2b1 {
display: inline-block;
margin-top: 15px;
width:98%;
height: auto;
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.snhome2_2b1 {
width: 98%;
}
}
@media screen and (min-width: 551px) {
.home2_2b1 {
}
}
.snsphoto2info {
position: absolute;
margin-top: 130px;
width: 20%;
height: auto;
left:65%;
color: white;
background-color: #000;
opacity: 0.7;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsphoto2info {
margin-top: 180px;
width: 80%;
left: 10%;
height: auto;
object-fit: cover;*/
}
}
@media screen and (min-width: 551px) {
.snsphoto2info {
}
}
.snsphoto2info1 {
margin-top: 20px;
width: 55%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-size: 1.3vw;
font-style:oblique;
color: white;
border-bottom: solid 3px white;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsphoto2info1 {
font-size: 4.2vw;
}
}
@media screen and (min-width: 551px) {
.snsphoto2info1 {
}
}
.snsphoto2info2 {
margin-top: 25px;
width: 100%;
height: auto;
text-align: center;
font-family:"Monotype Corsiva", serif;
font-size: 1.0vw;
color: white;
font-weight: 500;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsphoto2info2 {
width: 100%;
font-size: 3.8vw;
line-height: 30px;
}
}
@media screen and (min-width: 551px) {
.snsphoto2info2 {
}
}
.snsphoto2info3 {
margin-top: 25px;
width: 85%;
height: auto;
border: 10px solid #eee;
}
.snsphoto2info3 > .snsphoto2info3_img{
/*display: inline-block;*/
width: 100%;
transition: 1s;
}
@media screen and (max-width: 550px) {
.snsphoto2info3 {
margin-top:50px;
}
.snsphoto2info3_img{
}
}
@media screen and (min-width: 551px) {
.snsphoto2info3 {
margin-right: 50px;
}
.snsphoto2info3_img:hover{
/*transform: scale(1.3);*/
}
}
.home2_2b2 {
margin-top: 100px;
width:98%;
height: auto;
display: inline-block;
background-color: #f5f5dc;
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.home2_2b2 {
margin-top:300px;
width: 98%;
}
}
@media screen and (min-width: 551px) {
.home2_2b2 {
}
}
.infobox5 {
display: inline-block;
padding: 25px 2px;
margin-left: 10px;
width: 45%;
height: auto;
color: darkslategray;
font-family:"游ゴシック", serif;
/*font-style:oblique;*/
font-size: 1.1vw;
background-color: #eee;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.infobox5 {
margin-left: 0px;
width: 47%;
padding: 0px 0px;
}
}
@media screen and (min-width: 551px) {
.infobox5 {
}
}
.inbox5a {
display: inline-block;
padding: 10px 20px;
width:86%;
line-height: 2;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-size: 1.1vw;
font-weight: 400;
color: #4753a2;
font-style:oblique;*/
background-color: #eee;
/*border: 5px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5a {
width:100%;
font-size: 3.5vw;
line-height:22px;
}
}
@media screen and (min-width: 551px) {
.inbox5a {
}
}
.inbox5ab {
display: inline-block;
padding: 55px 25px;
/* line-height: 2;*/
width:64%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-size: 1.1vw;
/*font-weight: 400;*/
color: black;
font-style:oblique;*/
background-color: #eee;
/*border: 5px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5ab {
width:100%;
font-size: 3.5vw;
line-height:22px;
padding: 55px 2px;
width:75%;
}
}
@media screen and (min-width: 551px) {
.inbox5ab {
}
}
.inbox5aa {
display: inline-block;
width: 49%;
height: auto;
/*background: -moz-linear-gradient(top left, #FFF, #FFC778);
background: -webkit-linear-gradient(top left, #FFF, #FFC778);
background: linear-gradient(to bottom right, #FFF, #FFC778);*/
background: -moz-linear-gradient(top left, #FFF, #dbebc4);
background: -webkit-linear-gradient(top left, #FFF, #dbebc4);
background: linear-gradient(to bottom right, #FFF, #dbebc4); /*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5aa {
width: 97%;
}
}
@media screen and (min-width: 551px) {
.inbox5aa {
}
}
.info5index {
padding: 15px 1px;
width: 80%;
height:auto;
font-family:"Monotype Corsiva", serif;
font-size: 1.8vw;
font-weight: 600;
text-align: center;
/*font-style:oblique;*/
color: brown;
/*border: 2px solid red;*/
}
@media screen and (max-width: 550px) {
.info5index {
padding: 0px 0px;
width: 90%;
margin-top: 50px;
font-size: 3.8vw;
}
}
@media screen and (min-width: 551px) {
.info5index {
}
}
.inphoto5a {
margin-top: 40px;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: left;
font-style:oblique;
font-size: 2.2vw;
color: green;
/*border: 3px solid yellow;*/
}
.inphoto5a > .inphoto5a_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
transition: 1s;
}
@media screen and (max-width: 550px) {
.inphoto5a {
width: 100%;
}
.inphoto5a_img{
}
}
@media screen and (min-width: 551px) {
.inphoto5a {
}
.inphoto5a_img:hover{
transform: scale(1.2);
}
}
.inbox5a3right {
display: inline-block;
padding: 10px 20px;
line-height: 2;
width: 85%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: left;
font-size: 1.1vw;
/*font-weight: 500;*/
color: #4753a2;
/*font-style:oblique;*/
/* border: 5px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5a3right {
width: 97%;
padding:15px 10px;
font-weight: 300;
line-height:22px;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.inbox5a3right {
}
}
.inbox5a3right1 {
display: inline-block;
padding: 55px 1px;
/*line-height: 2;*/
width: 63%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-size: 1.0vw;
/*font-weight: 400;*/
color: black;
font-style:oblique;
/* border: 5px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5a3right1 {
width: 97%;
line-height:22px;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.inbox5a3right1 {
}
}
.centerbox2 {
display: inline-block;
width: 95%;
height: auto;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.centerbox2 {
margin-top: 50px;
width: 98%;
}
}
@media screen and (min-width: 551px) {
.centerbox2 {
}
}
.leftbox {
display: inline-block;
width: 50%;
height: auto;
color: darkslategray;
/*border: 5px solid blue;*/
}
@media screen and (max-width: 550px) {
.leftbox {
width: 90%;
}
}
@media screen and (min-width: 551px) {
.leftbox {
border: 13px solid #eee;
}
}
.inphoto7 {
display: inline-block;
width: 47%;
height: auto;
/*font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 1.1vw;
color: darkslategray;
/*border: 10px solid #eee;*/
}
.inphoto7 > .inphoto7_img{
/*display: inline-block;*/
width: 100%;
}
@media screen and (max-width: 550px) {
.inphoto7 {
width: 98%;
}
.inphoto7_img{
}
}
@media screen and (min-width: 551px) {
.inphoto7 {
background-color: darkslategray;
}
.inphoto7_img{
/*object-position: 0 100%*/
height: auto;
object-fit: contain;
}
}
.BBQbox7b1a2 {
padding:2px;
height: auto;
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7b1a2 {
width: 60%;
}
}
@media screen and (min-width: 551px) {
.BBQbox7b1a2 {
}
}
.inbox5a3c {
margin-top: 10px;
padding: 20px;
width: 40%;
height: auto;
margin-left: 25%;
font-family:"游ゴシック", serif;*/
/*font-style:oblique;*/
opacity: 0.6;
/*border: 5px solid white;*/
}
.inbox5a3c > .inbox5a3c_img{
}
.inbox5a3c_img:hover{
opacity: 0;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
@media screen and (max-width: 550px) {
.inbox5a3c {
margin-top: 5px;
margin-left:25%;
width: 100%;
}
.inbox5a3c_img{
width: 100%;
}
}
@media screen and (min-width: 551px) {
.inbox5a3c {
}
.inbox5a3c_img{
width: 100%;
/*object-position: 0 100%*/
}
}
.info6c1 {
position: absolute;
margin-top: 15px;
width: 16%;
margin-left: 10px;
height: auto;
font-family:"游ゴシック", serif;
/*font-style:oblique;*/
font-size: 1.2vw;
font-weight: 700;
text-align: center;
color: white;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.info6c1 {
margin-top: 10px;
margin-left: 10px;
width: 45%;
font-size: 3.8vw;
}
}
@media screen and (min-width: 551px) {
.info6c1 {
}
}
.inbox5a3c {
margin-top: 10px;
padding: 20px;
width: 40%;
height: auto;
margin-left: 25%;
font-family:"游ゴシック", serif;*/
/*font-style:oblique;*/
opacity: 0.6;
/*border: 5px solid white;*/
}
.inbox5a3c > .inbox5a3c_img{
}
.inbox5a3c_img:hover{
opacity: 0;
filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";
}
@media screen and (max-width: 550px) {
.inbox5a3c {
margin-top: 5px;
margin-left:25%;
width: 100%;
}
.inbox5a3c_img{
width: 100%;
}
}
@media screen and (min-width: 551px) {
.inbox5a3c {
}
.inbox5a3c_img{
width: 100%;
/*object-position: 0 100%*/
}
}
.leftbox1 {
display: inline-block;
padding: 20px 20px;
margin-left: 20px;
margin-top: 20px;
width: 35%;
height: auto;
/*font-style:oblique;*/
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.leftbox1 {
width: 80%;
margin-left: 0px;
}
}
@media screen and (min-width: 551px) {
.leftbox1 {
}
}
.centerboxmain {
display: inline-block;
margin-top: 40px;
width: 98%;
height: auto;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.centerboxmain {
width: 98%;
}
}
@media screen and (min-width: 551px) {
.centerboxmain {
}
}
.centerbox1 {
display: inline-block;
margin-top: 70px;
width: 100%;
height: auto;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.centerbox1 {
margin-top: 0px;
width: 98%;
}
}
@media screen and (min-width: 551px) {
.centerbox1 {
}
}
.info6right {
display: inline-block;
margin-left: 70%;
width: 30%;
height:auto;
font-family:"Monotype Corsiva", serif;
text-align: cnter;
font-style:oblique;
font-size: 1.8vw;
font-weight: 600;
color: white;
background-color: darkslategray;
/*border: 2px solid pink;*/
}
@media screen and (max-width: 550px) {
.info6right {
padding: 10px 10px;
margin-left: 10px;
width: 60%;
margin-top: 10px;
font-size: 6.8vw;
font-weight: 700;
color:brown;
background-color: white;
background: -moz-linear-gradient(top left, #f5f5f5 , #FFF, #a7d28d);
background: -webkit-linear-gradient(top left, #f5f5f5 , #FFF, #a7d28d);
background: linear-gradient(top left, #f5f5f5 ,#FFF, #a7d28d); /*border: 3px solid red;*/
}
}
@media screen and (min-width: 551px) {
.info6right {
padding: 5px 5px;
}
}
.inbox5right {
display: inline-block;
padding: 15px 15px;
width: 100%;
height: auto;
background-color: #f4fff4;
/*border: 5px solid yellow;*/
}
@media screen and (max-width: 550px) {
.inbox5right {
padding: 1px 1px;
}
}
@media screen and (min-width: 551px) {
.inbox5right {
}
}
.logocenterbox {
display: inline-block;
margin-top: 20px;
width: 85%;
height: auto;
border-bottom: solid 3px #3c6d49;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.logocenterbox {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.logocenterbox {
}
}
.logobox {
display: inline-block;
width:20%;
height: auto;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.logobox {
width: 98%;
}
}
@media screen and (min-width: 551px) {
.logobox {
}
}
.logophoto4 {
display: inline-block;
width: 60%;
height: auto;
text-align: left;
/*border: 1px solid blue;*/
}
.logophoto4 > .logophoto4_img{
/*display: inline-block;*/
text-align: right;
width: 100%;
/*transition: 1s;*/
}
@media screen and (max-width: 550px) {
.logophoto4 {
width: 15%;
}
.logophoto4_img{
}
}
@media screen and (min-width: 551px) {
.logophoto4 {
margin-right: 50px;
}
.logophoto4_img{
}
}
.logophoto4a {
display: inline-block;
width: 60%;
height: auto;
text-align: left;
/*border: 1px solid blue;*/
}
.logophoto4a > .logophoto4a_img{
/*display: inline-block;*/
text-align: right;
width: 100%;
/*transition: 1s;*/
}
@media screen and (max-width: 550px) {
.logophoto4a {
width: 90%;
}
.logophoto4a_img{
}
}
@media screen and (min-width: 551px) {
.logophoto4a {
margin-right: 50px;
}
.logophoto4a_img{
}
}
.info6right1 {
display: inline-block;
width: 70%;
height:auto;
font-family:"Monotype Corsiva", serif;
font-style:oblique;
text-align: left;
font-size: 1.5vw;
font-weight: 700;
color: darkslategray;
/*border: 2px solid red;*/
}
@media screen and (max-width: 550px) {
.info6right1 {
padding: 0px 0px;
width: 95%;
margin-top: 10px;
font-size: 4.8vw;
}
}
@media screen and (min-width: 551px) {
.info6right1 {
}
}
.info6right2 {
display: inline-block;
padding: 15px 10px;
width: 60%;
height:auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-size: 1.3vw;
font-weight: 400;
color: brown;
/*border: 2px solid green;*/
}
@media screen and (max-width: 550px) {
.info6right2 {
padding: 0px 0px;
width: 80%;
margin-top: 10px;
font-size: 3.8vw;
line-height:25px;
}
}
@media screen and (min-width: 551px) {
.info6right2 {
line-height:25px;
}
}
.info6right2a {
display: inline-block;
margin-left: 50px;
width: 80%;
height:auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-size: 1.0vw;
font-weight: 400;
color: brown;
/*border: 2px solid green;*/
}
@media screen and (max-width: 550px) {
.info6right2a {
padding: 0px 0px;
width: 80%;
margin-top: 10px;
font-size: 3.8vw;
line-height:25px;
}
}
@media screen and (min-width: 551px) {
.info6right2a {
line-height:20px;
}
}
.info6right3{
display: inline-block;
width: 100%;
height:auto;
font-family:"Monotype Corsiva", serif;
text-align: right;
font-size: 0.9vw;
font-weight: 400;
color: darkslategray;
font-style:oblique;*/
/*border: 2px solid pink;*/
}
@media screen and (max-width: 550px) {
.info6right3 {
padding: 0px 0px;
width: 100%;
margin-top: 10px;
font-size: 3.7vw;
}
}
@media screen and (min-width: 551px) {
.info6right3 {
}
}
.seasonbox {
display: inline-block;
margin-top: 100px;
width:100%;
height: auto;
background: linear-gradient( #ffe4e1,#f0fff0, #dbebc4, #bee0c2);
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.seasonbox {
margin-top: 50px;
width: 98%;
}
}
@media screen and (min-width: 551px) {
.seasonbox {
}
}
.spring {
display: inline-block;
padding: 0px;
margin-top: 5px;
margin-left: 10px;
width:85%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: left;
/*background: linear-gradient( #a7d28d, #e7e7e7, #192f60, #192f60);*/
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.spring {
padding: 0px;
margin-top: 40px;
margin-left: 0px;
width: 90%;
}
}
@media screen and (min-width: 551px) {
.spring {
}
}
.centerbox3 {
display: inline-block;
width: 95%;
height: auto;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.centerbox3 {
margin-top: 50px;
width: 98%;
}
}
@media screen and (min-width: 551px) {
.centerbox3 {
}
}
.seasonphoto {
display: inline-block;
margin-top: 10px;
margin-left: 10%;
width: 30%;
height: auto;
/*border: 2px solid red;*/
}
.seasonphoto > .seasonphoto_img{
/*display: inline-block;*/
text-align: right;
width: 100%;
/*transition: 1s;*/
}
@media screen and (max-width: 550px) {
.seasonphoto {
margin-left: 80px;
width: 50%;
}
.seasonphoto_img{
}
}
@media screen and (min-width: 551px) {
.seasonphoto {
margin-right: 50px;
}
.seasonphoto_img{
}
}
.springname {
display: inline-block;
width: 45%;
height: auto;
font-size: 4.0vw;
font-weight:700;
font-style:oblique;
color:#b30059;
text-shadow : 9px 3px 4px rgba(166, 166, 166, 0.86);
/*font-family: 'Kosugi', sans-serif;*/
/*font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";*/
/*font-family:'Sacramento', cursive;*/
border-bottom: solid 3px #622d18;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.springname {
width: 80%;
font-size: 7.5vw;
font-weight: 700;
margin-left: 25px;
text-align: center;
font-style:oblique;
}
}
@media screen and (min-width: 551px) {
.springname {
}
}
.springname1 {
display: inline-block;
padding: 20px 20px;
margin-top: 20px;
width: 90%;
margin-left: 50px;
height: auto;
text-align: center;
font-size: 2.0vw;
font-weight: 500;
color:#4e454a;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.springname1 {
margin-top: 20px;
margin-left: 20px;
width: 75%;
font-size: 4.5vw;
font-weight: 700;
/*line-height:35px;*/
}
}
@media screen and (min-width: 551px) {
.springname1 {
}
}
.sns6photo1menu {
margin-top: 25px;
width: 100%;
height: auto;
display: inline-block;
background: linear-gradient( #192f60, #e7e7e7, #192f60, #192f60);
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*background: black;*/
/*border: 5px solid green;*/
}
@media screen and (max-width: 550px) {
.sns6photo1menu {
margin-top: 20px;
width: 100%;
}
}
@media screen and (min-width: 551px) {
.sns6photo1menu {
}
}
.sns6photo1 {
margin-top: 25px;
width: 100%;
height: auto;
display: inline-block;
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*background: black;*/
/*border: 5px solid green;*/
}
@media screen and (max-width: 550px) {
.sns6photo1 {
margin-top: 50px;
width: 100%;
}
}
@media screen and (min-width: 551px) {
.sns6photo1 {
}
}
.sns6photo1a {
margin-top: 5px;
width: 100%;
height: auto;
display: inline-block;
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*border: 5px solid green;*/
}
@media screen and (max-width: 550px) {
.sns6photo1a {
margin-top: 50px;
width: 100%;
}
}
@media screen and (min-width: 551px) {
.sns6photo1a {
}
}
.bbqmenu_s {
display: inline-block;
padding: 10px;
margin-right: 10px;
width:20%;
height:auto;
/*border: 5px solid green;*/
}
.bbqmenu_s > .bbqmenu_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.bbqmenu_s {
margin-right: 0px;
width: 90%;
}
.bbqmenu_s_img{
height: 100px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.bbqmenu_s {
}
.bbqmenu_s_img{
/*object-position: 0 100%*/
}
}
.bbqmenu {
display: inline-block;
vertical-align: top;
padding: 10px;
margin-right: 10px;
width:20%;
color: white;
font-size: 1.7vw;
height:auto;
/*border: 5px solid green;*/
}
.bbqmenu > .bbqmenu_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.bbqmenu {
margin-right: 0px;
width: 90%;
color: white;
font-size: 4.8vw;
}
.bbqmenu_img{
height: 100px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.bbqmenu {
}
.bbqmenu_img{
/*object-position: 0 100%*/
}
}
.bbqmenu .caption1 {
font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 1.0vw;
color: white;
}
.bbqmenu .index1 {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0,0,0,0.4);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.bbqmenu:hover .index1 {
opacity: 1;
padding-top: 10px;*/
}
@media screen and (max-width: 550px) {
.bbqmenu:hover .index1 {
width: 100%;
}
.bbqmenu .caption1 {
font-size: 3.0vw;
}
}
@media screen and (min-width: 551px) {
.bbqmenu:hover .index1 {
}
}
.bbqmenu1 {
display: inline-block;
padding: 10px;
margin-right: 10px;
width:20%;
color: white;
font-size: 1.6vw;
height:auto;
/*border: 5px solid green;*/
}
.bbqmenu1 > .bbqmenu1_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.bbqmenu1 {
margin-right: 0px;
width: 90%;
color: white;
font-size: 4.8vw;
}
.bbqmenu1_img{
height: 100px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.bbqmenu1 {
}
.bbqmenu1_img{
/*object-position: 0 100%*/
}
}
.bbqmenu1 .caption1 {
font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 1.0vw;
color: white;
}
.bbqmenu1 .index1 {
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
background-color: rgba(0,0,0,0.4);
-webkit-transition: all 0.6s ease;
transition: all 0.6s ease;
}
.bbqmenu1:hover .index1 {
opacity: 1;
padding-top: 10px;*/
}
@media screen and (max-width: 550px) {
.bbqmenu1:hover .index1 {
width: 100%;
}
.bbqmenu1 .caption1 {
font-size: 3.0vw;
}
}
@media screen and (min-width: 551px) {
.bbqmenu1:hover .index1 {
}
}
.bbqmenuend {
padding: 10px 10px 10px 10px;
width: 45%;
height: auto;
font-family:"Monotype Corsiva", serif;*/
font-weight: 400;
/*font-style:oblique;*/
font-size: 1.0vw;
color: white;
/*border: 3px solid pink;*/
/*background: linear-gradient( #192f60, #e7e7e7, #192f60, #192f60);
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*border: 5px solid green;*/
}
@media screen and (max-width: 550px) {
.bbqmenuend {
padding-left: 0px;
margin-top: 5px;
width: 85%;
font-size: 3.5vw; text-align: left;
}
}
@media screen and (min-width: 551px) {
.bbqmenuend {
}
}
.springbox {
display: inline-block;
margin-top: 50px;
margin-left: 11%;
width:80%;
height: auto;
text-align: center;
background-color: white;
border: 3px solid #eee;
}
@media screen and (max-width: 550px) {
.springbox {
margin-top: 20px;
margin-left: 0%;
width: 100%;
}
}
@media screen and (min-width: 551px) {
.springbox {
}
}
.photoboxunder {
display: inline-block;
margin-top: 5px;
width: 34%;
height: auto;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.photoboxunder {
width: 98%;
}
}
@media screen and (min-width: 551px) {
.photoboxunder {
}
}
.underbox {
display: inline-block;
margin-left: 10px;
width: 70%;
height:auto;
font-family:"Monotype Corsiva", serif;
font-size: 0.9vw;
text-align: center;
color: darkslategray;
/*border: 2px solid pink;*/
}
@media screen and (max-width: 550px) {
.underbox {
padding: 0px 0px;
width: 95%;
margin-top: 10px;
font-size: 3.8vw;
}
}
@media screen and (min-width: 551px) {
.underbox {
}
}
.springhoto {
display: inline-block;
margin-top: 20px;
width: 85%;
height: auto;
color: gray;
/*border: 3px solid red;*/
}
.springhoto > .springhoto_img{
/*display: inline-block;*/
text-align: left;
width: 85%;
}
@media screen and (max-width: 550px) {
.springhoto {
padding: 10px;
width: 90%;
}
.springhoto_img{
}
}
@media screen and (min-width: 551px) {
.springhoto {
}
.springhoto_img{
/*height: 170px;*/
/* border-radius: 50%;*/
}
}
.springbox1 {
/*padding: 50px 10px;*/
display: inline-block;
padding-bottom: 5px;
width: 63%;
height: auto;
background-color: white;
/*border: 1px solid pink;*/
}
@media screen and (max-width: 550px) {
.springbox1 {
margin-top: 30px;
width: 100%;
font-size: 6.6vw;
}
}
@media screen and (min-width: 551px) {
.springbox1 {
}
}
.springno {
display: inline-block;
padding: 15px 15px;
width: 95%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-weight: 600;
font-size: 1.5vw;
font-style:oblique;
text-align: center;
color: #434da2;
/*border: 1px solid yellow;*/
}
@media screen and (max-width: 550px) {
.springno {
margin-left: 0px;
width: 88%;
font-size: 6.0vw;
}
}
@media screen and (min-width: 551px) {
.springno {
}
}
.springno1 {
display: inline-block;
padding: 15px 15px;
width: 90%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-size: 1.2vw;
font-weight: 400;
text-align: center;
color: #665a1a;
background-color: #e5ffff;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.springno1 {
margin-left: 0px;
width: 75%;
font-size: 4.5vw;
line-height:25px;
margin-top: 20px;
}
}
@media screen and (min-width: 551px) {
.springno1 {
}
}
.springno2 {
display: inline-block;
padding: 15px 15px;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-size: 0.9vw;
text-align: center;
color: darkslategray;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.springno2 {
margin-top: 15px;
font-size: 3.5vw;
width: 80%;
}
}
@media screen and (min-width: 551px) {
.springno2 {
}
}
.centerinbox {
display: inline-block;
margin-top: 5px;
width: 85%;
height: auto;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.centerinbox {
width: 98%;
}
}
@media screen and (min-width: 551px) {
.centerinbox {
}
}
.inphoto5a7a {
display: inline-block;
margin-top: 30px;
width: 25%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 0.9vw;
color: gray;
/*border: 3px solid red;*/
}
.inphoto5a7a > .inphoto5a7a_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.inphoto5a7a {
padding: 10px;
width: 90%;
}
.inphoto5a7a_img{
}
}
@media screen and (min-width: 551px) {
.inphoto5a7a {
}
.inphoto5a7a_img{
/*height: 170px;*/
/* border-radius: 50%;*/
}
}
.springplanbox {
display: inline-block;
margin-top:80px;
margin-left:15px;
padding:9px;
width:26%;
height: auto;
background-color: #EEE;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.springplanbox {
margin-top: 50px;
margin-left: 5px;
width: 93%;
}
}
@media screen and (min-width: 551px) {
.springplanbox {
}
}
.springplanbox1 {
display: inline-block;
width: 100%;
height: auto;
/*border: 3px solid yellow;*/
}
.springplanbox1 > .springplanbox1_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.springplanbox1 {
padding: 10px;
width: 80%;
}
.springplanbox1_img{
}
}
@media screen and (min-width: 551px) {
.springplanbox1 {
width: 100%;
}
.springplanbox1_img{
/*height: 170px;*/
/* border-radius: 50%;*/
}
}
.springplanname {
/*padding: 50px 10px;*/
margin-top: 15px;
width: 99%;
left:0px;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 1.6vw;
font-weight: 500;
color: green;
display: inline-block;
/*border: 1px solid darkslategray;*/
}
@media screen and (max-width: 550px) {
.springplanname {
width: 100%;
font-size: 6.6vw;
}
}
@media screen and (min-width: 551px) {
.springplanname {
}
}
.springplanname1 {
/*padding: 50px 10px;*/
width: 96%;
left:0px;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 1.6vw;
font-weight: 400;
color: green;
/*border: 1px solid darkslategray;*/
}
@media screen and (max-width: 550px) {
.springplanname1 {
width: 100%;
font-size: 6.6vw;
}
}
@media screen and (min-width: 551px) {
.springplanname1 {
}
}
.springplaninfo {
margin-top: 10px;
width: 95%;
height: auto;
padding: 10px;
font-family:"Monotype Corsiva", serif;
color: darkslategray;
font-size: 1.0vw;
display: inline-block;
line-height:28px;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.springplaninfo {
width:85%;
font-size: 4.0vw;
}
}
@media screen and (min-width: 551px) {
.springplaninfo {
}
}
.springplanbot {
margin-top: 20px;
width: 86%;
height: auto;
font-family:"游ゴシック", serif;
color: white;
font-size: 13px;
display: inline-block;
text-align: center;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.springplanbot {
font-size: 8px;
}
}
@media screen and (min-width: 551px) {
.springplanbot {
}
}
.BBQbox7binfo {
vertical-align: top;
margin-top: 10px;
padding: 20px 20px 20px 20px;
width: 45%;
height: auto;
display: inline-block;
/*font-family:"Monotype Corsiva", serif;*/
text-align: left;
/*font-style:oblique;*/
color: darkslategray;
border: 1px solid white;*/
}
@media screen and (max-width: 550px) {
.BBQbox7binfo {
padding: 0px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.BBQbox7binfo {
}
}
table {
background-color: #cdefff; /* 背景色指定 */
border-collapse: collapse; /* セルの線を重ねる */
}
@media screen and (max-width: 550px) {
.table {
}
}
@media screen and (min-width: 551px) {
.table{
}
}
th,td {
background: linear-gradient(to bottom right, #f5f5f5 ,#FFF, #FFC778); /*border: 3px solid red;*/
/* 背景色指定 */
border: solid 1px; /* 枠線指定 */
padding: 15px; /* 余白指定 */
text-align: center;
font-size: 0.9vw;border: 1px solid white;
}
@media screen and (max-width: 550px) {
.th,td {
padding: 10px;
font-size: 1.9vw;
}
}
@media screen and (min-width: 551px) {
.th,td {
}
}
th {
width: 300px; /* 幅指定 */
height: auto; /* 高さ指定 */
}
@media screen and (max-width: 550px) {
.th {
}
}
@media screen and (min-width: 551px) {
.th {
}
}
.BBQbox7b {
vertical-align: top;
margin-top: 20px;
padding: 10px;
width: 45%;
height: auto;
display: inline-block;
/*font-family:"Monotype Corsiva", serif;*/
text-align: left;
/*font-style:oblique;*/
color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7b {
padding: 0px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.BBQbox7b {
}
}
.BBQbox7bb {
display: inline-block;
vertical-align: top;
margin-top: -51px;
margin-left:60%;
width: 38%;
height: auto;
/*font-family:"Monotype Corsiva", serif;*/
text-align: left;
/*font-style:oblique;*/
color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7bb {
padding: 0px;
margin-left:-481px;
margin-top: -61px;
width: 98%;*/
}
}
@media screen and (min-width: 551px) {
.BBQbox7bb {
}
}
.BBQbox7bc {
vertical-align: top;
padding: 10px;
width: 95%;
height: auto;
display: inline-block;
font-size: 1.0vw;
/*font-family:"Monotype Corsiva", serif;*/
/*font-style:oblique;*/
color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7bc {
padding: 0px;
width: 95%;
font-size: 3.9vw;
}
}
@media screen and (min-width: 551px) {
.BBQbox7bc {
}
}
.BBQbox7ba1 {
/*vertical-align: top;*/
margin-top: 1px;
padding: 5px;
width: 95%;
height: auto;
display: inline-block;
/*font-family:"Monotype Corsiva", serif;*/
/*font-style:oblique;*/
font-size: 1.0vw;
color: green;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7ba1 {
padding: 0px;
width: 95%;
font-size: 3.0vw;
}
}
@media screen and (min-width: 551px) {
.BBQbox7ba1 {
}
}
.BBQbox7ba {
vertical-align: top;
margin-top: 20px;
padding: 5px;
width: 95%;
height: auto;
display: inline-block;
/*font-family:"Monotype Corsiva", serif;*/
text-align: left;
/*font-style:oblique;*/
color: green;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7ba {
padding: 0px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.BBQbox7ba {
}
}
.BBQbox7bab {
vertical-align: top;
margin-top: 20px;
padding: 5px;
width: 65%;
height: auto;
display: inline-block;
/*font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
color: #001e43;
*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7bab {
padding: 0px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.BBQbox7bab{
}
}
.centerboxindex {
display: inline-block;
margin-top: 5px;
width: 95%;
height: auto;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.centerboxindex {
width: 98%;
}
}
@media screen and (min-width: 551px) {
.centerboxindex {
}
}
.outbox {
margin-top: 1px;
width: 95%;
padding: 5px;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;
text-align: left;
/*font-style:oblique;*/
font-size: 1.3vw;
color: darkslategray;
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.outbox {
margin-top: 0px;
width: 95%;
font-size: 4.6vw;
text-align: center;
}
}
@media screen and (min-width: 551px) {
.outbox {
}
}
.outbox1 {
display: inline-block;
margin-top: 1px;
width: 96%;
padding: 5px;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;
text-align: left;
/*font-style:oblique;*/
font-size: 1.3vw;
color: darkslategray;
/*border: 1px solid gray;*/
}
@media screen and (max-width: 550px) {
.outbox1 {
margin-top: 0px;
width: 95%;
font-size: 4.5vw;
text-align: center;
}
}
@media screen and (min-width: 551px) {
.outbox1 {
}
}
.outbox2 {
display: inline-block;
margin-top: 10px;
width: 30%;
padding: 5px;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;
text-align: left;
/*font-style:oblique;*/
font-size: 1.3vw;
color: darkslategray;
/*border: 5px solid gray;*/
}
@media screen and (max-width: 550px) {
.outbox2 {
margin-top: 0px;
width: 95%;
font-size: 4.5vw;
text-align: center;
}
}
@media screen and (min-width: 551px) {
.outbox2 {
}
}
.outboxinfo1 {
display: inline-block;
margin-top: 1px;
vertical-align: top;
width: 53%;
margin-left: 250px;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-size: 1.3vw;
color: #4753a2;
line-height:22px;
background-color: #eee;
border: 5px solid #eee;*/
}
@media screen and (max-width: 550px) {
.outboxinfo1 {
margin-top: 20px;
width: 95%;
font-size: 4.5vw;
text-align: center;
}
}
@media screen and (min-width: 551px) {
.outboxinfo1 {
}
}
.outboxinfo1a {
display: inline-block;
margin-top: -131px;
vertical-align: top;
width: 55%;
margin-left: 250px;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
font-size: 1.3vw;
color: #4753a2;
line-height:22px;
background-color: #eee;
border: 5px solid #eee;*/
}
@media screen and (max-width: 550px) {
.outboxinfo1a {
margin-top: 0px;
margin-left: 30px;
width: 80%;
font-size: 4.5vw;
text-align: center;
}
}
@media screen and (min-width: 551px) {
.outboxinfo1a {
}
}
.BBQbox7b1 {
margin-top: 1px;
width: 100%;
padding: 5px;
height: auto;
left:50%;
font-family:"Monotype Corsiva", serif;
font-size: 1.0vw;
color:#4e454a;
text-align: left;
/*font-style:oblique;*/
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7b1 {
margin-top: 0px;
padding: 0px;
width:99%;
line-height: 8.0vw;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.BBQbox7b1 {
}
}
.snsbox5ab {
display: inline-block;
margin-top:5px;
margin-left:55px;
padding: 1%;
width:80%;
height: auto;
background-color: #EEE;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox5ab {
margin-top: 50px;
margin-left: 0px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.snsbox5ab {
}
}
.snsbox6a1 {
padding: 10px;
width:95%;
height: auto;
font-family:"Monotype Corsiva", serif;
/*background: linear-gradient( #a7d28d, #e7e7e7, #192f60, #192f60);*/
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox6a1 {
margin-top: 10px;
width: 90%;
}
}
@media screen and (min-width: 551px) {
.snsbox6a1 {
}
}
.snsbox6a {
display: inline-block;
padding: 10px;
width:95%;
height: auto;
font-family:"Monotype Corsiva", serif;
/*background: linear-gradient( #a7d28d, #e7e7e7, #192f60, #192f60);*/
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox6a {
margin-top: 10px;
width: 90%;
}
}
@media screen and (min-width: 551px) {
.snsbox6a {
}
}
.inbox3a1 {
/*padding: 40px 0px 30px 0px;*/
margin-top: 0px;
width: 30%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-shadow:-1px -1px 3px darkslategray;
text-align: right;
font-style:oblique;
font-size: 23px;
color: green;
font-weight: 700;
border-bottom: solid 10px #3c6d49;
/*color: darkslategray;*/
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.inbox3a1 {
width: 85%;
font-size: 22px;
}
}
@media screen and (min-width: 551px) {
.inbox3a1 {
}
}
.inbox5a1 {
display: inline-block;
width: 90%;
height: auto;
font-family:"游ゴシック", serif;
color: darkslategray;
font-size: 0.9vw;
text-align: center;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5a1 {
margin-top: 20px;
font-size: 3.0vw;
font-family:"游ゴシック", serif;
}
}
@media screen and (min-width: 551px) {
.inbox5a1 {
}
}
.inbox5a1g { /*yureru */
display: inline-block;
margin-top: 10px;
width: 45%;
height: auto;
/* background: -moz-linear-gradient(top right, #FFF, #FFC778);
background: -webkit-linear-gradient(top right, #FFF, #FFC778);
background: linear-gradient(to bottom left, #FFF, #FFC778); */
transform-origin: center bottom;
animation: yurayura 2s linear infinite;
}
@keyframes yurayura {
0% , 100%{
transform: rotate(10deg);
}
50%{
transform: rotate(-10deg);
}
}
.inbox5a1g > .inbox5a1g_img {
/*display: inline-block;*/
/*text-align: center;*/
width: 50%;
}
@media screen and (max-width: 480px) {
.inbox5a1g {
}
.inbox5a1g_img{
}
}
@media screen and (min-width: 551px) {
.inbox5a1g {
}
.inbox5a1g_img{
}
}
.info8 {
/*padding: 40px 0px 30px 0px;*/
width: 95%;
height: 50px;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 23px;
color: green;*/
display: inline-block;
/*color: darkslategray;*/
border: 5px solid pink;*/
}
@media screen and (max-width: 550px) {
.info8 {
width: 100%;
font-size: 22px;
}
}
@media screen and (min-width: 551px) {
.info8 {
}
}
.info8a {
display: inline-block;
width: 30%;
margin-left: 0px;
height: auto;
font-size: 3.0vw;
font-family:"Monotype Corsiva", serif;
/*border-bottom: solid 3px #3c6d49;*/
/*background: linear-gradient(90deg,#387d39, #bee0c2,#387d39, #dbebc4);*/
border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.info8a {
width: 100%;
font-size: 6.5vw;
font-weight: 700;
}
}
@media screen and (min-width: 551px) {
.info8a {
}
}
.info8a1 {
display: inline-block;
width: 30%;
margin-left: 0px;
margin-top: 10px;
height: auto;
font-size: 3.0vw;
font-family:"Monotype Corsiva", serif;
/*border-bottom: solid 3px #3c6d49;*/
/*background: linear-gradient(90deg,#387d39, #bee0c2,#387d39, #dbebc4);*/
border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.info8a1 {
width: 100%;
font-size: 6.5vw;
font-weight: 700;
}
}
@media screen and (min-width: 551px) {
.info8a1 {
}
}
.info8a2 {
display: inline-block;
width: 65%;
margin-left: 0px;
margin-top: 10px;
height: auto;
font-size: 3.0vw;
font-family:"Monotype Corsiva", serif;
/*border-bottom: solid 3px #3c6d49;*/
/*background: linear-gradient(90deg,#387d39, #bee0c2,#387d39, #dbebc4);*/
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.info8a2 {
width: 100%;
font-size: 6.5vw;
font-weight: 700;
}
}
@media screen and (min-width: 551px) {
.info8a2 {
}
}
.inphoto6{
position: relative;
width:80%;
height: auto;
/*border: 1px solid black;*/
}
.inphoto6 > .inphoto6_img{
/*display: inline-block;*/
text-align: center;
width: 100%;
}
@media screen and (max-width: 550px) {
.inphoto6 {
}
.inphoto6_img{
}
}
@media screen and (min-width: 551px) {
.inphoto6 {
}
.inphoto6_img{
}
}
.info6bb {
margin-top:0px;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 1.5vw;
font-weight: 600;
color: brown;
/*border: 2px solid red;*/
}
@media screen and (max-width: 550px) {
.info6bb {
padding: 0px 20px;
width: 80%;
margin-top: 10px;
font-size: 4.8vw;
}
}
@media screen and (min-width: 551px) {
.info6bb {
}
}
.body_photo1{
margin-top: 755px;
width:99%;
height: 320px;
background-color:#eee;
border:3px solid red;*/ /*日帰りのバーベキュー、*/
}
@media screen and (max-width: 550px) {
.body_photo1 {
}
}
@media screen and (min-width: 551px) {
.body_photo1 {
}
}
main {
margin-top: 500px;
}
.scroll-fade-side {
background-color: #3cb371;
height: 200px;
margin: 500px auto;
width: 80%;
}
.bg {
background: repeating-linear-gradient(
-45deg,
transparent,
transparent 1em,
rgba(248, 187, 208, 0.4) 0,
rgba(248, 187, 208, 0.1) 2em,
rgba(248, 187, 208, 0.3) 0,
rgba(248, 187, 208, 0.2) 4em,
rgba(244, 143, 177, 0.6) 0,
rgba(244, 143, 177, 0.2) 2em
),
repeating-linear-gradient(
45deg,
transparent,
transparent 1em,
rgba(248, 187, 208, 0.4) 0,
rgba(248, 187, 208, 0.1) 2em,
rgba(248, 187, 208, 0.3) 0,
rgba(248, 187, 208, 0.2) 4em,
rgba(244, 143, 177, 0.4) 0,
rgba(244, 143, 177, 0.1) 2em
);
background-blend-mode: multiply;
}
.img-wrap {
overflow: hidden;
position: relative;
}
.img-wrap:before {
animation: img-wrap 6s cubic-bezier(.4, 0, .2, 1) forwards;
background-image: url("17_kabe/19_caf_top2.png");
bottom: 0;
content: '';
left: 0;
pointer-events: none;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
@keyframes img-wrap {
100% {
transform: translateX(100%);
}
}
.top_photo_index{
position: fixed;
/* position:absolute;*/
margin-top: -18%;
width: 30%;
font-family:"Monotype Corsiva", serif;
text-shadow:-1px -1px 3px darkslategray;
color: white;
border:5px solid green;*/
}
@media screen and (max-width: 550px) {
.top_photo_index {
margin-top: -50%;
width: 98%;
font-size: 30px;
left:2%;
}
}
@media screen and (min-width: 551px) {
.top_photo_index {
font-size: 3.5vw;
}
}
.indeximg1{
margin-left: -55px;
width:90%;
height: auto;
border: 1px solid black;*/
}
.indeximg1 > .indeximg1_img{
/*display: inline-block;*/
width:50%;
}
@media screen and (max-width: 550px) {
.indeximg1 {
margin-left: 25px;
}
.indeximg1_img{
}
}
@media screen and (min-width: 551px) {
.indeximg1 {
}
.indeximg1_img{
}
}
.info_f1 {
/*position: absolute;*/
/*margin: 15px ;*/
width: 80%;
height:auto;
left: 20%;
font-family:"Monotype Corsiva", serif;
text-align: center;
/*font-style:oblique;*/
color:green;
/*border:1px solid brown;*/
}
@media screen and (max-width: 550px) {
.info_f1 {
top: 1.5%;
font-size: 17px;
color:green;
font-family:"KaiTi", serif;
}
}
@media screen and (min-width: 551px) {
.info_f1 {
font-size: 1.5vw;
}
}
.inbox3a1 {
/*padding: 40px 0px 30px 0px;*/
width: 70%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-shadow:-1px -1px 3px darkslategray;
text-align: center;
font-style:oblique;
font-size: 23px;
color: green;
font-weight: 700;
display: inline-block;
border-bottom: solid 5px #3c6d49;
/*color: darkslategray;*/
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox3a1 {
width: 85%;
font-size: 22px;
}
}
@media screen and (min-width: 551px) {
.inbox3a1 {
}
}
.inbox3a2 {
width: 90%;
margin-left: 10%;
height: auto;
text-align: center;
font-size: 1.6vw;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.inbox3a2 {
width: 76%;
text-align: center;
font-size: 5.0vw;
font-weight: 700;
}
}
@media screen and (min-width: 551px) {
.inbox3a2 {
}
}
.inbox3a21 {
width: 50%;
margin-left: 10%;
height: auto;
font-size: 1.8vw;
color: white;
/* border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.inbox3a21 {
width: 76%;
text-align: center;
font-size: 5.0vw;
font-weight: 700;
}
}
@media screen and (min-width: 551px) {
.inbox3a21 {
}
}
.snsmain2 {
margin-top: 50px;
width: 80%;
height: auto;
margin-left: 10%;
background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.snsmain2 {
margin-left: 5px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.snsmai2 {
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*background: linear-gradient(45deg, #000000, #e7e7e7);*/
}
}
.green {
width:100%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 2.2vw;
color: green;
display: inline-block;
/*border: 3px solid red;*/
}
.green > .green_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.green {
width:90%;
}
.green_img{
}
}
@media screen and (min-width: 551px) {
.green {
}
.green_img{
border-radius: 10px;
}
}
.green1 {
margin-top: 30px;
width:70%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 30px;
color: green;
display: inline-block;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.green1 {
width:95%;
font-size: 17px;
}
}
@media screen and (min-width: 551px) {
.green1 {
}
}
.green2 {
margin-top: 2%;
width:90%;
height: auto;
text-align: center;
font-style:oblique;
font-size: 1.0vw;
color: darkslategray;
font-family:"KaiTi", serif;
display: inline-block;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.green2 {
width:95%;
padding: 3px;
font-size: 12px;
}
}
@media screen and (min-width: 551px) {
.green2 {
}
}
.what {
margin-top: 2%;
overflow:auto;
display: inline-block;
width: 90%;
height: 180px;
padding:5px;
/*color:#e8e8e8;*/
color:black;
background-color:#eee;
line-height:2.5em;
/*border:2px dotted #ffffff;*/
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.what {
margin-left: 0px;
width:90%;
}
}
@media screen and (min-width: 551px) {
.what {
}
}
.iframe1 {
display: none;
width: 100%;
margin:50px 0px;
border: 5px solid blue;*/
}
@media screen and (max-width: 550px) {
.iframe1 {
width:90%;
}
}
@media screen and (min-width: 551px) {
.iframe1 {
}
}
.inbox3a3 {
width: 35%;
height: auto;
font-size: 3.0vw;
/*font-family: 'Kosugi', sans-serif;*/
/*font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体";*/
/*font-family:'Sacramento', cursive;*/
border-bottom: solid 3px #3c6d49;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.inbox3a3 {
width: 80%;
font-size: 6.5vw;
font-weight: 700;
margin-left: 25px;
}
}
@media screen and (min-width: 551px) {
.inbox3a3 {
}
}
.sns4info {
margin-top: 50px;
width:68%;
height: auto;
font-family:"游ゴシック", serif;
color: darkslategray;
font-size: 1.0vw;
display: inline-block;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.sns4info {
margin: 20px 60px;
width:68%;
}
}
@media screen and (min-width: 551px) {
.sns4info {
}
}
.snsbox2 {
margin-top: 80px;
width: 95%;
height: auto;
color: white;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsbox2 {
margin-top: 50px;
margin-left: 5px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.snsbox2 {
}
}
.snsphoto3 {
margin-top: 1px;
width: 100%;
height: auto;
left: 0%;
/*border: 5px solid green;*/
}
.snsphoto3 > .snsphoto3_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.snsphoto3 {
width: 100%;
}
.snsphoto3_img{
}
}
@media screen and (min-width: 551px) {
.snsphoto3 {
width: 100%;
}
.snsphoto3_img{
/*border-radius: 10px;*/
/*object-position: 0 50%*/
height: 320px;
object-fit: contain;*/
}
}
.snsphoto3 {
width: 100%;
height: auto;
left: 0%;
/*border: 5px solid green;*/
}
.snsphoto3 > .snsphoto3_img{
/*display: inline-block;*/
text-align: left;
width: 95%;
}
@media screen and (max-width: 550px) {
.snsphoto3 {
margin-top: 50px;
width: 100%;
}
.snsphoto3_img{
}
}
@media screen and (min-width: 551px) {
.snsphoto3 {
width: 85%;
}
.snsphoto3_img{
border-radius: 50%;*/
}
}
.list2b_c2a {
width: 100%;
}
.list2b_c2a ul {
list-style: none;
}
.list2b_c2a ul li p {
position: relative;
text-align: center;
width: 100%;
font-size: 21px;
font-style:oblique;
line-height:20px;
font-family:'Monotype Corsiva';
font-weight: 400;
color:#330000 ;
}
.stage {
position: relative;
overflow: hidden;
width: 95%;
background:#EEE;
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.stage {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.stage {
}
}
.photos {
position: absolute;
width: 100%;
top:30px;
transition:left 1s ease;
animation:transtoright0 32s linear infinite;animation-delay:1s;
}
@media screen and (max-width: 550px) {
.photos {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.photos {
}
}
.pic {
width:25%;
position:absolute;
}
@media screen and (max-width: 550px) {
.pic {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.pic {
}
}
.pic img {
width:94%;
}
#ph1 {
left:0%;
border: 3px solid blue;
}
#ph2 { left:25%; }
#ph3 { left:50%; }
#ph4 { left:75%; }
#ph5 { left:100%; }
#ph6 { left:125%; }
#ph7 { left:150%; }
#ph8 { left:175%; }
#ph9 { left:200%; }
#ph10 { left:225%; }
#ph11 { left:250%; }
#ph12 { left:275%; }
#ph13 { left:300%; }
@keyframes transtoright0 {
0% { left:0%; }
10% { left:0%; }
12.5% { left:-25% }
22.5% { left:-25% }
25% { left:-50% }
35% { left:-50% }
37.5% { left:-75% }
47.5% { left:-75% }
50% { left:-100% }
60% { left:-100% }
62.5% { left:-125% }
72.5% { left:-125% }
75% { left:-150% }
85% { left:-150% }
87.5% { left:-175% }
97.5% { left:-175% }
99.9999% { left:-200% }
100% { left:1%; }
}
@keyframes transtoright1 {
0% { left:0%; }
10% { left:0%; }
12.5% { left:-25% }
22.5% { left:-25% }
25% { left:-50% }
35% { left:-50% }
37.5% { left:-75% }
47.5% { left:-75% }
50% { left:-100% }
60% { left:-100% }
62.5% { left:-125% }
72.5% { left:-125% }
75% { left:-150% }
85% { left:-150% }
87.5% { left:-175% }
97.5% { left:-175% }
99.9999% { left:-200% }
100% { left:1%; }
}
@keyframes transtoright2 {
0% { left:-25%; }
10% { left:-25%; }
12.5% { left:-50% }
22.5% { left:-50% }
25% { left:-75% }
35% { left:-75% }
37.5% { left:-100% }
47.5% { left:-100% }
50% { left:-125% }
60% { left:-125% }
62.5% { left:-150% }
72.5% { left:-150% }
75% { left:-175% }
85% { left:-175% }
87.4999% { left:-200% }
87.5% { left:0% }
97.5% { left:0% }
100% { left:-25%; }
}
@keyframes transtoright3 {
0% { left:-50%; }
10% { left:-50%; }
12.5% { left:-75% }
22.5% { left:-75% }
25% { left:-100% }
35% { left:-100% }
37.5% { left:-125% }
47.5% { left:-125% }
50% { left:-150% }
60% { left:-150% }
62.5% { left:-175% }
72.5% { left:-175% }
74.9999% { left:-200% }
75% { left:0% }
85% { left:0% }
87.5% { left:-25% }
97.5% { left:-25% }
100% { left:-50%; }
}
@keyframes transtoright4 {
0% { left:-75%; }
10% { left:-75%; }
12.5% { left:-100% }
22.5% { left:-100% }
25% { left:-125% }
35% { left:-125% }
37.5% { left:-150% }
47.5% { left:-150% }
50% { left:-175% }
60% { left:-175% }
62.4999% { left:-200% }
62.5% { left:0% }
72.5% { left:0% }
75% { left:-25% }
85% { left:-25% }
87.5% { left:-50% }
97.5% { left:-50% }
100% { left:-75%; }
}
@keyframes transtoright5 {
0% { left:-100%; }
10% { left:-100%; }
12.5% { left:-125% }
22.5% { left:-125% }
25% { left:-150% }
35% { left:-150% }
37.5% { left:-175% }
47.5% { left:-175% }
49.9999% { left:-200% }
50% { left:0% }
60% { left:0% }
62.5% { left:-25% }
72.5% { left:-25% }
75% { left:-50% }
85% { left:-50% }
87.5% { left:-75% }
97.5% { left:-75% }
100% { left:-100%; }
}
@keyframes transtoright6 {
0% { left:-124%; }
10% { left:-124%; }
12.5% { left:-150% }
22.5% { left:-150% }
25% { left:-175% }
35% { left:-175% }
37.4999% { left:-200% }
37.5% { left:0% }
47.5% { left:0% }
50% { left:-25% }
60% { left:-25% }
62.5% { left:-50% }
72.5% { left:-50% }
75% { left:-75% }
85% { left:-75% }
87.5% { left:-100% }
97.5% { left:-100% }
100% { left:-125%; }
}
@keyframes transtoright7 {
0% { left:-150%; }
10% { left:-150%; }
12.5% { left:-175% }
22.5% { left:-175% }
24.9999% { left:-200% }
25% { left:0% }
35% { left:0% }
37.5% { left:-25% }
47.5% { left:-25% }
50% { left:-50% }
60% { left:-50% }
62.5% { left:-75% }
72.5% { left:-75% }
75% { left:-100% }
85% { left:-100% }
87.5% { left:-125% }
97.5% { left:-125% }
100% { left:-150%; }
}
@keyframes transtoright8 {
0% { left:-175%; }
10% { left:-175%; }
12.4999% { left:-200% }
12.5% { left:0% }
22.5% { left:0% }
25% { left:-25% }
35% { left:-25% }
37.5% { left:-50% }
47.5% { left:-50% }
50% { left:-75% }
60% { left:-75% }
62.5% { left:-100% }
72.5% { left:-100% }
75% { left:-125% }
85% { left:-125% }
87.5% { left:-150% }
97.5% { left:-150% }
100% { left:-175%; }
}
.info5a {
/*padding: 40px 0px 30px 0px;*/
width: 45%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 2.1vw;
font-weight: 600;
/*color: darkslategray;*/
color: green;*/
display: inline-block;
border-bottom: solid 3px #3c6d49;
/* border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.info5a {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.info5a {
}
}
.info5a1 {
/*padding: 40px 0px 30px 0px;*/
width: 45%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 2.1vw;
font-weight: 600;
/*color: darkslategray;*/
color: green;*/
display: inline-block;
/* border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.info5a1 {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.info5a1 {
}
}
.info5b {
/*padding: 50px 10px;*/
width: 95%;
left:0px;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 1.6vw;
font-weight: 500;
color: green;
display: inline-block;
/*border: 1px solid darkslategray;*/
}
@media screen and (max-width: 550px) {
.info5b {
width: 100%;
font-size: 6.6vw;
}
}
@media screen and (min-width: 551px) {
.info5b {
}
}
.info5b1 {
/*padding: 50px 10px;*/
display: inline-block;
padding-bottom: 15px;
width: 60%;
height: auto;
text-align: right;
font-family:"Monotype Corsiva", serif;
font-style:oblique;
font-size: 1.6vw;
font-weight: 500;
color: green;
background-color: white;
/*border: 1px solid pink;*/
}
@media screen and (max-width: 550px) {
.info5b1 {
width: 100%;
font-size: 6.6vw;
}
}
@media screen and (min-width: 551px) {
.info5b1 {
}
}
.inbox5right1 {
display: inline-block;
width: 45%;
height: auto;
font-family:"游ゴシック", serif;
color: darkslategray;
font-size: 1.1vw;
text-align: center;
border: 5px solid yellow;*/
}
@media screen and (max-width: 550px) {
.inbox5right1 {
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.inbox5right1 {
}
}
.inbox5a1a {
margin-top: 10px;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
color: darkslategray;
font-size: 1.0vw;
display: inline-block;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5a1a {
width:100%;
font-size: 4.7vw;
}
}
@media screen and (min-width: 551px) {
.inbox5a1a {
}
}
.inbox5a1b {
display: inline-block;
padding: 30px;
width: 92%;
height: auto;
font-family:"Monotype Corsiva", serif;
color: darkslategray;
font-size: 1.0vw;
text-align: center;
background-color: #eee;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.inbox5a1b {
margin-left: 0px;
width: 83%;
font-size: 3.3vw;
}
}
@media screen and (min-width: 551px) {
.inbox5a1b {
}
}
.info5c {
display: inline-block;
margin-top: 10px;
width: 88%;
height: auto;
font-family:"Monotype Corsiva", serif;
color: #942343;
font-size: 1.3vw;
text-align: center;
/*border: 1px solid yellow;*/
}
@media screen and (max-width: 550px) {
.info5c {
margin-left: 5px;
width: 100%;
font-size: 6.0vw;
}
}
@media screen and (min-width: 551px) {
.info5c {
}
}
.inphoto4b {
margin-top: 20px;
width: 86%;
height: auto;
font-family:"游ゴシック", serif;
color: white;
font-size: 13px;
display: inline-block;
text-align: center;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.inphoto4b {
font-size: 8px;
}
}
@media screen and (min-width: 551px) {
.inphoto4b {
}
}
.inphoto51 {
margin-top: 50px;
display: inline-block;
width: 40%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: left;
font-size: 2.2vw;
color: green;
border: 3px solid yellow;*/
}
@media screen and (max-width: 550px) {
.inphoto51 {
margin-top: 15px;
width: 80%;
}
}
@media screen and (min-width: 551px) {
.inphoto51 {
margin-right: 50px;
}
}
.inphoto5b{
margin-top: 40px;
display: inline-block;
width: 35%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: left;
font-style:oblique;
font-size: 2.2vw;
color: green;
/*border: 3px solid yellow;*/
}
.inphoto5b > .inphoto5b_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
transition: 1s;
}
@media screen and (max-width: 550px) {
.inphoto5b {
width: 80%;
}
.inphoto5b_img{
}
}
@media screen and (min-width: 551px) {
.inphoto5b {
width: 50%;
}
.inphoto5b_img:hover{
}
}
.inbox5b {
margin-top: 50px;
width: 35%;
height: 35px;
font-family:"游ゴシック", serif;
color: darkslategray;
font-size: 1.1vw;
display: inline-block;
border: 1px solid darkslategray;*/
}
@media screen and (max-width: 550px) {
.inbox5b {
font-size: 2.9vw;
}
}
@media screen and (min-width: 551px) {
.inbox5b {
}
}
.sample_p {
width: 100px;
height: 182px;
overflow: hidden;
}
.sample_p img {
opacity: 0.9;
width: 150px;
transition: all 0.5s;
}
.sample_p img:hover {
opacity: 0.7;
transform: scale(1.2, 1.2);
z-index: 9999;
}
.inbox5b {
background-color: white;
}
/* マウスオーバー時の背景色 */
.inbox5b:hover {
background-color: #000;
/*background-color: #ffc9d7;*/
opacity: 0.6;
}
.inbox5b {
background-color: white;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.inbox5b:hover {
opacity: 0.6;
background-color: #000;
/*background-color: #ffc9d7;*/
}
.inbox6a {
margin-top: 100px;
width: 60%;
font-family:"Monotype Corsiva", serif;
height: auto;
font-size: 2.0vw;
/*background-color: #eee;*/
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.inbox6a {
font-size: 4.8vw;
width: 60%;
}
}
@media screen and (min-width: 551px) {
.inbox6a {
}
}
.info6d {
display: inline-block;
width:100%;
height: auto;
font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 17px;
font-weight: 600;
color: darkslategray;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.info6d {
width: 85%;
margin-top: 10px;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.info6d {
}
}
.info6d1 {
margin-top: 40px;
margin-left: 50px:
width:80%;
height: auto;
font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 17px;
font-weight: 600;
color: darkslategray;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.info6d1 {
width: 80%;
margin-top: 10px;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.info6d1 {
}
}
.info6e {
/*padding: 40px 0px 30px 0px;*/
padding: 10px;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 23px;
color: green;
display: inline-block;
border-bottom: solid 2px #3c6d49;
/*color: darkslategray;*/
border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.info6e {
width: 85%;
font-size: 22px;
}
}
@media screen and (min-width: 551px) {
.info6e {
}
}
.sns6photo1 {
margin-top: 50px;
width: 100%;
height: auto;
display: inline-block;
background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
border: 5px solid green;*/
}
.sns6photo1 > .sns6photo1_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.sns6photo1 {
width: 100%;
}
.sns6photo1_img{
}
}
@media screen and (min-width: 551px) {
.sns6photo1 {
}
.sns6photo1_img{
/*object-position: 0 100%*/
width: 80%;
height: auto;
object-fit: cover;
}
}
.snsbox7 {
margin-top: 50px;
width: 98%;
height: auto;
left:50%;
/*font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 1.1vw;
color: darkslategray;
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.snsbox7 {
width: 98%;
}
}
@media screen and (min-width: 551px) {
.snsbox7 {
}
}
.schoolbox7b {
margin-top: 20px;
width: 40%;
height: auto;
left:50%;
display: inline-block;
/*font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 1.1vw;
color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.schoolbox7b {
width: 100%;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.schoolbox7b {
}
}
.schoolbox7c {
margin-top: 10px;
width: 100%;
height: auto;
left:50%;
display: inline-block;
/*font-family:"Monotype Corsiva", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 1.1vw;
color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.schoolbox7c {
width: 98%;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.schoolbox7c {
}
}
.BBQbox_7 {
margin-top: 50px;
width:100%;
height: auto;
display: inline-block;
/*font-family:"Monotype Corsiva", serif;*/
text-align: left;
/*font-style:oblique;*/
background-color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox_7 {
padding: 0px;
margin-top: 50px;
width: 95%;
}
}
@media screen and (min-width: 551px) {
.BBQbox_7 {
}
}
.BBQbox_7a {
display: inline-block;
width: 50%;
height: auto;
left:10px;
/*font-family:"Monotype Corsiva", serif;*/
text-align: left;
/*font-style:oblique;*/
color: darkslategray;
/*border: 2px solid pink;*/
}
@media screen and (max-width: 550px) {
.BBQbox_7a {
margin-top: 20px;
width: 100%;
}
}
@media screen and (min-width: 551px) {
.BBQbox_7a {
}
}
.BBQbox7a1 {
margin-top: 0px;
width: 88%;
font-size: 2.4vw;
margin-left: 30px;
font-family:"Monotype Corsiva", serif;
font-weight: 600;
text-shadow:-1px -1px 8px brown;
text-align: center;
color: white;
/*border: 5px solid yellow;*/
}
@media screen and (max-width: 550px) {
.BBQbox7a1 {
margin-top: 0px;
width: 52%;
text-align: center;
font-size: 4.8vw;
}
}
@media screen and (min-width: 551px) {
.BBQbox7a1 {
}
}
.BBQbox7a2 {
margin-top: 10px;
margin-left: 60px;
width: 85%;
font-size: 1.1vw;
font-family:"Monotype Corsiva", serif;
text-align: center;
color: white;
/*border: 5px solid yellow;*/
}
@media screen and (max-width: 550px) {
.BBQbox7a2 {
margin-top: 20px;
padding: 5px;
text-align: center;
margin-left: 15px;
width: 85%;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.BBQbox7a2 {
}
}
.BBQbox7a3 {
margin-top: 10px;
margin-left: 60px;
width: 95%;
font-size: 1.1vw;
font-family:"Monotype Corsiva", serif;
text-align: left;
color: white;
/*border: 5px solid yellow;*/
}
@media screen and (max-width: 550px) {
.BBQbox7a3 {
margin-top: 3px;
text-align: center;
margin-left: 20px;
width: 89%;
font-size: 3.4vw;
}
}
@media screen and (min-width: 551px) {
.BBQbox7a3 {
}
}
.BBQbox7b1a1 {
padding:2px;
width: 95%;
height: auto;
font-family:"游ゴシック", serif;*/
text-align: center;
/*font-style:oblique;*/
font-size: 0.9vw;
color: white;
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7b1a1 {
margin-left: 1px;
padding: 5px;
width: 90%;
font-size: 10px;
}
}
@media screen and (min-width: 551px) {
.BBQbox7b1a1 {
}
}
.BBQbox_7b {
display: inline-block;
width: 46%;
height: auto;
left: 50px;
/*font-family:"Monotype Corsiva", serif;*/
text-align: left;
/*font-style:oblique;*/
color: darkslategray;
/*border: 5px solid pink;*/
}
@media screen and (max-width: 550px) {
.BBQbox_7b {
margin-top: 10px;
width: 100%;
}
}
@media screen and (min-width: 551px) {
.BBQbox_7b {
}
}
.BBQbox7a {
display: inline-block;
margin-top: 50px;
width: 100%;
height: auto;
/*background-color: #000;*/
/*border: 5px solid yellow;*/
}
.BBQbox7a >.spend1_img{
/*display: inline-block;*/
width: 100%;
left: 0%;
/*opacity: 0.6;*/
/*translate: 0.8s;*/
}
.spend1_img:hover{
/* opacity: 0;*/
/* filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";*/
}
@media screen and (max-width: 550px) {
.BBQbox7a {
margin-top: 1px;
margin-left: 0px;
width: 100%;
}
.spend1_img{
width: 100%;
height: 200px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.BBQbox7a {
}
.spend1_img{
}
}
.BBQbox7ab {
display: inline-block;
margin-top: 0px;
width: 100%;
height: auto;
text-align: center;*/
/*background-color: #000;*/
/*border: 5px solid yellow;*/
}
@media screen and (max-width: 550px) {
.BBQbox7ab {
width: 95%;
margin-left: 5px;
text-align: center;
}
}
@media screen and (min-width: 551px) {
.BBQbox7ab {
}
}
.snsbox5ab {
display: inline-block;
margin-top: 50px;
width:100%;
height: auto;
background: linear-gradient( #a7d28d, #e7e7e7, #192f60, #192f60);
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.snsbox5ab {
margin-top: 50px;
width: 98%;
}
}
@media screen and (min-width: 551px) {
.snsbox5ab {
}
}
.inphoto5a7 {
display: inline-block;
width: 100%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: left;
font-style:oblique;
font-size: 2.2vw;
color: green;
/*border: 3px solid yellow;*/
}
.inphoto5a7 > .inphoto5a7_img{
/*display: inline-block;*/
text-align: left;
width: 100%;
}
@media screen and (max-width: 550px) {
.inphoto5a7 {
padding: 10px;
width: 80%;
}
.inphoto5a7_img{
}
}
@media screen and (min-width: 551px) {
.inphoto5a7 {
width: 100%;
}
.inphoto5a7_img{
/*height: 170px;*/
/* border-radius: 50%;*/
}
}
.springplanbot1 {
position: absolute;
width: 18%;
height: auto;
font-family:"Monotype Corsiva", serif;
/*font-style:oblique;*/
font-style:oblique;
font-size: 1.0vw;
font-weight: 700;
text-align: center;
color: white;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.springplanbot1 {
margin-top: 10px;
margin-left: 5px;
width: 80%;
font-size: 4.0vw;
}
}
@media screen and (min-width: 551px) {
.springplanbot1 {
}
}
.springplanbot2 {
position: absolute;
margin-top: 15px;
width: 18%;
height: auto;
font-family:"Monotype Corsiva", serif;
/*font-style:oblique;*/
font-style:oblique;
font-size: 1.0vw;
font-weight: 700;
text-align: center;
color: white;
/*border: 3px solid pink;*/
}
@media screen and (max-width: 550px) {
.springplanbot2 {
margin-top: 20px;
margin-left: 10px;
width: 80%;
font-size: 4.0vw;
}
}
@media screen and (min-width: 551px) {
.springplanbot2 {
}
}
/* スクロールCSS */
.fade-in {
opacity: 0;
transition-duration: 500ms;
transition-property: opacity, transform;
}
.fade-in-up {
transform: translate(0, 50px);
}
.fade-in-down {
transform: translate(0, -50px);
}
.fade-in-left {
transform: translate(-50px, 0);
}
.fade-in-right {
transform: translate(50px, 0);
}
.scroll-in {
opacity: 1;
transform: translate(0, 0);
}
.endbox {
display: inline-block;
margin-top: 10px;
width: 100%;
height: auto;
vertical-align: top;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.endbox {
width: 95%;
margin-top: 50px;
}
}
@media screen and (min-width: 551px) {
.endbox {
}
}
.endboxinfo {
position: absolute;
margin-top: 50px;
left:65%;
width: 29%;
height: auto;
color: white;
background-color: white;
opacity: 1.0;*/
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.endboxinfo {
left: 40px;
margin-top: 25px;
width: 80%;
}
}
@media screen and (min-width: 551px) {
.endboxinfo {
}
}
.endindex {
margin-top: 15px;
width: 75%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-size: 1.7vw;
color:#001e43;
font-weight: 700;
text-decoration: none;
/*border-bottom: solid 3px white;/*
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.endindex {
margin: 20px 40px;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.endindex {
}
}
.endinfo {
margin-top: 15px;
width: 100%;
height: auto;
text-align: center;
font-family:"游ゴシック", serif;
font-size: 1.0vw;
color: black;
font-weight: 600;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.endinfo {
margin: 10px 40px;
width: 65%;
font-size: 9px;
}
}
@media screen and (min-width: 551px) {
.endinfo{
}
}
.endinfo1 {
padding: 5px 20px;
margin-top: 10px;
width: 86%;
height: auto;
font-family:"游ゴシック", serif;
color: black;
font-size: 13px;
display: inline-block;
text-decoration: none;
text-align: center;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.endinfo1 {
font-size: 8px;
}
}
@media screen and (min-width: 551px) {
.endinfo1 {
}
}
.lastbox {
margin-top: 50px;
width: 100%;
height: auto;
left:20%;
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
background: linear-gradient(#2f4f4f, #2e8b57, #e7e7e7, #fefefe);*/
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.lastbox {
}
}
@media screen and (min-width: 551px) {
.lastbox {
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*background: linear-gradient(45deg, #000000, #e7e7e7);*/
}
}
.cressonindex {
display: inline-block;
width: 90%;
height: auto;
left: 40%;
/*border: 1px solid brown;*/
}
@media screen and (max-width: 550px) {
.cressonindex {
width: 90%;
}
}
@media screen and (min-width: 551px) {
.cressonindex {
}
}
.cressonname {
padding: 3px;
width: 47%;
height: auto;
left: 40%;
text-align: center;
font-family:"KaiTi", serif;
font-size: 25px;
font-weight: 800;
color: white;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.cressonname {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.cressonname {
}
}
.cressonadd {
display: inline-block;
margin-top: 10px;
width: 100%;
height: auto;
color: black;
font-family:"KaiTi", serif;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.cressonadd {
font-size: 2.5vw;
}
}
@media screen and (min-width: 551px) {
.cressonadd {
}
}
.lastinfo {
width: 80%;
height: 30%;
left: 40%;
padding: 20px 20px;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.lastinfo {
}
}
@media screen and (min-width: 551px) {
.lastinfo {
}
}
.last {
padding: 15px;
display: inline-block;
width: 90%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 0.9vw;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.last {
}
}
@media screen and (min-width: 551px) {
.last {
}
}
.BBQbox7b2 {
margin-top: 1px;
width: 85%;
padding: 20px;
height: auto;
line-height :30px;
font-family:"游ゴシック", serif;*/
text-align: left;
/*font-style:oblique;*/
font-size: 1.0vw;
color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7b2 {
margin-top: 0px;
width: 95%;
font-size: 3.5vw;
padding: 0px;
}
}
@media screen and (min-width: 551px) {
.BBQbox7b2 {
}
}
.BBQbox7b3 {
margin-top: 1px;
width: 95%;
padding: 5px;
height: auto;
left:50%;
font-family:"游ゴシック", serif;*/
text-align: left;
/*font-style:oblique;*/
font-size: 1.0vw;
color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7b3 {
margin-top: 0px;
width: 73%;
font-size: 10px;
}
}
@media screen and (min-width: 551px) {
.BBQbox7b3 {
}
}
.BBQbox7b2a {
margin-top: 10px;
width: 100%;
height: auto;
font-family:"游ゴシック", serif;*/
text-align: right;
/*font-style:oblique;*/
font-size: 0.9vw;
color: darkslategray;
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.BBQbox7b2a {
margin-top: 0px;
width: 95%;
font-size: 2.8vw;
}
}
@media screen and (min-width: 551px) {
.BBQbox7b2a {
}
}
.info7b {
/*padding: 50px 10px;*/
display: inline-block;
width:75%;
margin-left: 250px;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 2.0vw;
font-weight: 600;
color: white;
background-color: darkslategray;
/*border-bottom: solid 2px #3c6d49;*/
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.info7b {
margin-left: 15px;
width: 75%;
font-size: 4.5vw;
color: white;
}
}
@media screen and (min-width: 551px) {
.info7b {
}
}
.infobox7 {
margin-left: 50px;
padding: 10px 2px;
width: 100%;
height: auto;
color: darkslategray;
font-family:"游ゴシック", serif;
/*font-style:oblique;*/
font-size: 1.1vw;
display: inline-block;
background-color: white;
/*border: 3px solid blue;*/
}
@media screen and (max-width: 550px) {
.infobox7 {
margin-left: 5px;
width: 90%;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.infobox7 {
}
}
.infobox8 {
padding: 50px 2px;
width: 72%;
height: auto;
color: darkslategray;
font-family:"游ゴシック", serif;
/*font-style:oblique;*/
font-size: 1.1vw;
display: inline-block;
border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.infobox8 {
width: 100%;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.infobox8 {
}
}
.info7c {
/*padding: 40px 0px 30px 0px;*/
width: 70%;
margin-left: 100px;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: left;
font-style:oblique;
font-size: 1.5vw;
font-weight: 600;
color: brown;*/
display: inline-block;
border-bottom: solid 2px #3c6d49;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.info7c {
margin-left: 50px;
text-align: center;
width: 70%;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.info7c {
}
}
.inbox7a {
display: inline-block;
padding-top: 30px;
width: 70%;
height: auto;
font-family:"游ゴシック", serif;
text-align: center;
font-size: 1.1vw;
font-weight: 500;
color: darkslategray;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox7a {
width: 95%;
font-size: 3.5vw;
}
}
@media screen and (min-width: 551px) {
.inbox7a {
}
}
.inbox7b {
width: 36%;
height: auto;
font-family:"游ゴシック", serif;
color: darkslategray;
text-align: left;
font-size: 1.0vw;
display: inline-block;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox7b {
}
}
@media screen and (min-width: 551px) {
.inbox7b {
}
}
.inbox5a4 {
margin-top: 20px;
width: 86%;
height: auto;
font-family:"游ゴシック", serif;
color: black;
font-size: 13px;
display: inline-block;
text-decoration: none;
text-align: center;
/*border: 1px solid blue;*/
}
@media screen and (max-width: 550px) {
.inbox5a4 {
font-size: 8px;
}
}
@media screen and (min-width: 551px) {
.inbox5a4 {
}
}
.snsphoto3info {
position: absolute;
margin-top: 120px;
left:65%;
width: 29%;
height: auto;
color: white;
background-color: white;
opacity: 0.9;*/
border: 3px solid red;
}
@media screen and (max-width: 550px) {
.snsphoto3info {
margin-top: 160px;
width: 90%;
height: 120px;
}
}
@media screen and (min-width: 551px) {
.snsphoto3info {
}
}
.snsphoto3info1 {
margin-top: 25px;
width: 75%;
height: auto;
font-family:"Monotype Corsiva", serif;
font-size: 1.5vw;
color: black;
font-weight: 600;
text-decoration: none;
/*border-bottom: solid 3px white;/*
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsphoto3info1 {
margin: 20px 40px;
font-size: 10px;
}
}
@media screen and (min-width: 551px) {
.snsphoto3info1 {
}
}
.snsphoto3info2 {
margin-top: 25px;
width: 100%;
height: auto;
text-align: center;
font-family:"游ゴシック", serif;
font-size: 1.0vw;
color: black;
font-weight: 600;
/*border: 3px solid red;*/
}
@media screen and (max-width: 550px) {
.snsphoto3info2 {
margin: 10px 40px;
width: 65%;
font-size: 9px;
}
}
@media screen and (min-width: 551px) {
.snsphoto3info2 {
}
}
.snsinfobox4ph {
width: 100%;
height: auto;
background-color:green;
/*border: 5px solid yellow;*/
}
.snsinfobox4ph >.spend_img{
/*display: inline-block;*/
text-align: center;
width: 100%;
left: 0%;
opacity: 0.6;
translate: 0.8s;
}
.spend_img:hover{
opacity: 1;
/* filter: alpha(opacity=80);
-ms-filter: "alpha( opacity=80 )";*/
}
@media screen and (max-width: 550px) {
.snsinfobox4ph {
width: 100%;
}
.spend_img{
height: 150px;
object-fit: cover;
}
}
@media screen and (min-width: 551px) {
.snsinfobox4ph {
}
.spend_img{
object-fit: contain;
}
}
.endobox {
margin-top: 5%;
width: 100%;
height: auto;
left:20%;
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
background: linear-gradient(#2f4f4f, #2e8b57, #e7e7e7, #fefefe);*/
border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.endobox {
}
}
@media screen and (min-width: 551px) {
.endobox {
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*background: linear-gradient(45deg, #000000, #e7e7e7);*/
}
}
.cressonbox {
width: 100%;
height: auto;
left:20%;
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
background: linear-gradient(#2f4f4f, #2e8b57, #e7e7e7, #fefefe);*/
/*border: 1px solid red;*/
}
@media screen and (max-width: 550px) {
.cressonbox {
}
}
@media screen and (min-width: 551px) {
.cressonbox {
/*background: linear-gradient(#efffef, #f7ffef, #e7e7e7);*/
/*background: linear-gradient(45deg, #000000, #e7e7e7);*/
}
}
.cresson {
padding: 30px 0px;
width: 18%;
height: auto;
/*border:5px solid red;*/
}
.cresson > .cresson_img{
/*display: inline-block;*/
text-align: center;
width: 100%;
}
@media screen and (max-width: 550px) {
.cresson {
margin-top: 42%;
width: 90%;
left: 5%;
}
.cresson_img{
}
}
@media screen and (min-width: 551px) {
.cresson {
}
.cresson_img{
}
}
.cbox1 {
display: inline-block;
width: 90%;
height: auto;
left: 40%;
/*border: 1px solid brown;*/
}
@media screen and (max-width: 550px) {
.cbox1 {
width: 90%;
}
}
@media screen and (min-width: 551px) {
.cbox1 {
}
}
.cboxna1 {
padding: 3px;
width: 47%;
height: auto;
left: 40%;
text-align: center;
font-family:"KaiTi", serif;
font-size: 25px;
font-weight: 800;
color: white;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.cboxna1 {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.cboxna1 {
}
}
.cboxna1a {
padding: 3px;
width: 47%;
height: auto;
left: 40%;
text-align: center;
font-family:"KaiTi", serif;
font-size: 25px;
color: green;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.cboxna1a {
width: 100%;
}
}
@media screen and (min-width: 551px) {
.cboxna1a {
}
}
.cboxna2 {
display: inline-block;
margin-top: 10px;
width: 100%;
height: auto;
color: black;
font-family:"KaiTi", serif;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.cboxna2 {
font-size: 2.5vw;
}
}
@media screen and (min-width: 551px) {
.cboxna2 {
}
}
.cboxna3 {
display: inline-block;
width: 15%;
height: auto;
left: 40%;
font-family:"KaiTi", serif;
text-decoration: none;
font-size: 1.1vw;
color: black;
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.cboxna3 {
font-size: 2.5vw;
}
}
@media screen and (min-width: 551px) {
.cboxna3 {
}
}
.cboxna4 {
display: inline-block;
width: 15%;
height: 30%;
left: 40%;
font-family:"KaiTi", serif;
font-size: 1.1vw;
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.cboxna4 {
}
}
@media screen and (min-width: 551px) {
.cboxna4 {
}
}
.cbox2 {
width: 80%;
height: 30%;
left: 40%;
padding: 20px 20px;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.cbox2 {
}
}
@media screen and (min-width: 551px) {
.cbox2 {
}
}
.cboxna5 {
display: inline-block;
width: 15%;
height: 30%;
left: 40%;
font-family:"KaiTi", serif;
font-size: 1.1vw;
/*border: 5px solid red;*/
}
@media screen and (max-width: 550px) {
.cboxna5 {
}
}
@media screen and (min-width: 551px) {
.cboxna5 {
}
}
.cbox3 {
padding: 15px;
display: inline-block;
width: 90%;
height: auto;
font-family:"Monotype Corsiva", serif;
text-align: center;
font-style:oblique;
font-size: 0.9vw;
/*border: 5px solid brown;*/
}
@media screen and (max-width: 550px) {
.cbox3 {
}
}
@media screen and (min-width: 551px) {
.cbox3 {
}
}