@charset "UTF-8";
/* CSS Document */
section {
width:100%;
position: relative;
}
#block01 {
overflow: hidden;
height:100vh; 
}
#block01 h2{
position:absolute;
right:20%;
top:60px;
z-index:2;
writing-mode: vertical-rl;
font-size: 1.1em;
letter-spacing: 0.1em;
line-height:1.4em;
text-orientation:upright;
}
#block01 ul {
position:absolute;
width:100%;
height: calc(100vh - 105px); 
top:105px;
right:0;
}
#block01 li {
width:100%;
height: calc(100vh - 105px); 
background-repeat: no-repeat;
background-size: cover;
background-position: center;
margin: 0;
}
#block01 li:nth-child(1)  {
background-image: url(https://eto-itoshima.jp/wp-content/themes/eto_theme/images/main01.jpg);
}
#block01 li:nth-child(2) {
background-image: url(https://eto-itoshima.jp/wp-content/themes/eto_theme/images/main02.jpg);
}
#block01 li:nth-child(3) {
background-image: url(https://eto-itoshima.jp/wp-content/themes/eto_theme/images/main03.jpg);
}
#block02{
width:100%;
padding-top: 30px;
}
#block02 h2{
padding:0 3% 0 90px;
font-size: 1.6em;
line-height: 1.2em;
margin: 0 0 1em;
}
#block02 p{
padding:0 3% 0 90px;
font-size: 0.8em;
line-height: 1.6em;
margin: 0 0 1.4em;
}
.ymv.show{
-webkit-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.4s; 
-moz-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.4s; 
-o-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.4s; 
transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.4s;
opacity:1.0;
}
.ymv{
-webkit-transform: translate(0,30px);
transform: translate(0,30px);
-webkit-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.4s; 
-moz-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.4s; 
-o-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.4s; 
transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.4s;
opacity:0;
}
.xmv.show{
-webkit-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.8s; 
-moz-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.8s; 
-o-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.8s; 
transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.8s;
opacity:1.0;
}
.xmv{
-webkit-transform: translate(-40px,0);
transform: translate(-40px,0);
-webkit-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.8s; 
-moz-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.8s; 
-o-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.8s; 
transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 0.8s;
opacity:0;
}
.xmv2.show{
-webkit-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 1.0s; 
-moz-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 1.0s; 
-o-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 1.0s; 
transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 1.0s;
opacity:1.0;
}
.xmv2{
-webkit-transform: translate(40px,0);
transform: translate(40px,0);
-webkit-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 1.0s; 
-moz-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 1.0s; 
-o-transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 1.0s; 
transition: all 2.0s cubic-bezier(0.340, 0.025, 0.150, 0.970) 1.0s;
opacity:0;
}
.greeting01 {
margin:0 3% 1.4em 90px;
}
.greeting01 img {
width:100%;
}
.greeting02 {
margin:-2em 32% 0 3%;
}
.greeting02 img {
width:100%;
}
.greeting03 {
margin:-3.5em 8% 1.4em 50%;
}
.greeting03 img {
width:100%;
}
.greeting04 {
margin:0 3% 1.4em 90px;
}
.greeting04 img {
width:100%;
}
.greeting05 {
margin:0;
}
.greeting06 {
display:none;
}
.greeting05 img {
width:100%;
}
.bird01 {
margin:-4.2em 20% 0 68%;
}
.bird01 img {
width:100%;
}
.bird02 {
margin:0 12% 0 77%;
}
.bird02 img {
width:100%;
}
.bird03 {
margin:-5.5em 10% 1.4em 78%;
}
.bird03 img {
width:100%;
}
.slider02 {
width:100%;
}
.slider02 li {
width:50%;
}
.slider02 li img {
width:100%;
height: 40vw;
object-fit: cover;
}
#block03{
padding:30px 3% 0 90px;
background-color:#eee;
}
#block03 h2{
text-align:center;
font-size: 1.1em;
line-height: 1.2em;
margin: 0 0 0.6em;
}
#block03 h2 + p{
text-align:center;
font-size: 0.8em;
line-height: 1.4em;
margin: 0 0 1.6em;
}
#block03 .cate{
text-align: center;
padding:0 0 1em;
}
#block03 h3 {
display: inline-block;
font-size: 0.9em;
line-height: 1.6em;
padding: 0 5px;
margin: 0 auto 0.8em;
background-color: #00583b;
color: #fff;
}
#block03 h4 {
font-size: 0.9em;
line-height: 1.4em;
margin: 0 auto 0.5em;
}
#block03 p{
font-size: 0.7em;
line-height: 1.6em;
margin: 0 0 1em;
}
.mado_border {
clip-path: inset(0% round 100px 100px 0px 0px); /* お好みの形子要素より少し大きくする等の調整も可 */
background-color: #00583b; /* ボーダーの色 */
padding: 1px; /* ボーダーの太さ分だけ内側を空ける */
width: 200px;
height: 280px;
margin: 0 auto;
}
.mado_waku {
/* 上の角（左右）だけを大きく丸める設定 */
clip-path: inset(0% round 100px 100px 0px 0px);
width: 100%;
height: 100%;
}
.mado01 {
background: url('https://eto-itoshima.jp/wp-content/themes/eto_theme/images/work01.jpg') center/cover; /* 窓の中に見せたい背景や画像 */
}
.mado02 {
background: url('https://eto-itoshima.jp/wp-content/themes/eto_theme/images/work02.jpg') center/cover; /* 窓の中に見せたい背景や画像 */
}
.mado03 {
background: url('https://eto-itoshima.jp/wp-content/themes/eto_theme/images/work03.jpg') center/cover; /* 窓の中に見せたい背景や画像 */
}
.mado04 {
background: url('https://eto-itoshima.jp/wp-content/themes/eto_theme/images/work04.jpg') center/cover; /* 窓の中に見せたい背景や画像 */
}
#block04{
padding:30px 3% 30px 90px;
}
#block04 h2{
text-align:center;
font-size: 1.1em;
line-height: 1.2em;
margin: 0 0 0.6em;
}
#block04 #sb_instagram {
}
#block04 #sb_instagram .sb_instagram_header {
padding:0 0 12px;
}
#block04 #sb_instagram .sb_instagram_header a {
color:#005a3a;
}

#block05{
width:100%;
background-color:#eee;
}
.bl05c{
width:100%;
height:350px;
margin-top: 0;
}
.bl05c iframe{
height:350px;
}
#block05 .com {
width: 100%;
height: 62vw;
margin: 0 auto 1.4em;
background: url('https://eto-itoshima.jp/wp-content/themes/eto_theme/images/about01.jpg') center/cover; /* 窓の中に見せたい背景や画像 */
}
#outline_wrap {
padding:0 3% 0 90px;
}
#block05 h2{
text-align:left;
font-size: 1.0em;
line-height: 1.2em;
margin: 0 0 0.6em;
}
#block05 p{
font-size: 0.8em;
line-height: 1.6em;
margin: 0 0 0.6em;
}
#block05 p:nth-of-type(2){
margin: 0 0 2.0em;
}
#block05 p:nth-of-type(3){
font-size: 0.9em;
margin: 0;
}
#block05 p:nth-of-type(4){
font-size: 0.6em;
}
#block05 p:nth-of-type(5){
margin: 0;
padding:0 0 1.4em;
}
copy {
display:block;
text-align:center;
font-size:0.8em;
padding:20px 0;
background-color:#00583b;
color:#fff;
}






@media (min-width: 600px) {
#bl02_wrap {
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
.bl02_l{
width:55%;
}
.bl02_r{
width:45%;
}
.bl02_l:nth-of-type(1){
order:0;
}
.bl02_r:nth-of-type(2){
order:1;
}
.bl02_l:nth-of-type(3){
order:2;
}
.bl02_r:nth-of-type(4){
order:3;
}
.bl02_r:nth-of-type(5){
order:5;
}
.bl02_l:nth-of-type(6){
order:4;
}
.greeting05 {
order:6;
}
.greeting01,
.greeting04 {
margin:0 3% 1.4em 0;
}
#block02 .bl02_r p{
padding:0 3% 0 0;
}
.bird03 {
margin:1.0em 10% 1.4em 78%;
}
#cate_wrap {
width:100%;
margin:0 auto;
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
#block03 h2 + p{
margin: 0 0 2em;
}
#block03 .cate{
width:42%;
container-type: inline-size;
text-align: center;
padding:0 0 35px 0;
margin:0 4%;
}
.mado_border {
clip-path: inset(0% round 50cqw 50cqw 0px 0px); /* お好みの形子要素より少し大きくする等の調整も可 */
background-color: #00583b; /* ボーダーの色 */
padding: 1px; /* ボーダーの太さ分だけ内側を空ける */
width: 100cqw;
height: 135cqw;
}
.mado_waku {
/* 上の角（左右）だけを大きく丸める設定 */
clip-path: inset(0% round 50cqw 50cqw 0px 0px);
width: 100%;
height: 100%;
}
#bl05_wrap{
display:flex;
flex-direction: row;
flex-wrap: wrap;
}
#block05 .com {
width: 50%;
height: 38vw;
margin:0;
}
#outline_wrap {
width:44%;
padding:1.4em 3% 0;
}
}




@media (min-width: 768px) {
#block01 h2{
font-size: 1.3em;
}
#block02{
padding:40px 0 0;
}
#block02 h2{
font-size: 1.7em;
}
#block02 p{
font-size: 0.9em;
}
.greeting05 {
width:50%;
}
.greeting06 {
order:7;
display:block;
width:50%;
}
.greeting06 img {
width:100%;
}
#block03{
padding:40px 3% 0 90px;
}
#block03 h2{
font-size: 1.2em;
}
#block03 h2 + p{
font-size: 0.9em;
}
#block03 h3 {
font-size: 1.0em;
}
#block03 h4 {
font-size: 1.0em;
}
#block03 p{
font-size: 0.8em;
}
#block04 {
padding:40px 3% 35px 90px;
}
#block04 h2{
font-size: 1.2em;
}
#block05 h2{
font-size: 1.1em;
}
#block05 p{
font-size: 0.9em;
}
#block05 p:nth-of-type(3){
font-size: 1.0em;
}
#block05 p:nth-of-type(4){
font-size: 0.7em;
}
.bl05c{
height:450px;
}
.bl05c iframe{
height:450px;
}
}




@media (min-width: 1024px) {
#block01 h2{
font-size: 1.4em;
}
#block02{
width:auto;
padding:50px 3% 50px 90px;
}
#bl02_wrap {
width:919px;
margin:0 auto;
}
#block02 h2{
padding:0 3% 0 10%;
font-size: 1.8em;
}
#block02 p{
padding:0 3% 0 10%;
font-size: 1.0em;
}
#cate_wrap {
width:919px;
}
#block03{
padding:50px 3% 0 90px;
}
#block03 .cate{
width:28%;
padding:0 0 40px 0;
margin:0 11%;
}
#block04 {
padding:50px 3% 45px 90px;
}
#bl04_wrap {
width:919px;
margin:0 auto;
padding:0;
}
#block04 h2{
padding:0;
}
#block05{
width:auto;
padding:50px 3% 50px 90px;
}
#bl05_wrap {
width:919px;
margin:0 auto;
}
#block05 .com {
height: 345px;
}
}