/*
Theme Name: portablewinch.jp
Author: Teruhisa Osawa
Version: 1.0
*/


*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}html{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}img:not([alt]){filter:blur(0)}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}


*{
box-sizing:border-box;
}
html, body {
height:100%;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
font-style: normal;
overflow: auto;
font-feature-settings : "palt";
-webkit-overflow-scrolling: touch;
}
body{
font-size:24px;
color:#333333;
-webkit-text-size-adjust: 100%;
}

a{
text-decoration:none;
opacity:1;
line-height:100%;
color:#333333;
}
a,a:hover {
-webkit-transition:0.7s;
-moz-transition:0.7s;
-o-transition:0.7s;
transition:0.7s;
}
a img:hover {
-moz-opacity:0.5;
opacity:0.5;
}
a:hover{
opacity:0.4;
cursor:pointer;
}
p,dt,dd,td,th,div{
line-height:2;
}
img{
max-width:100%;
height:auto;
vertical-align:bottom;
}

a.tel,
a.tel img{
opacity:1;
cursor:default;
}

.ctr{
text-align:center;
}


/* reset */
.rst ul{
margin:0;
padding:0;
padding-inline-start: 0;
margin-block-start: 0;
margin-block-end: 0;
}
.rst ul li{
list-style:none;
}


/* flex */
.flex1{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex2{
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}

/*====================================================
LAYOUT
====================================================*/

.w1200{
position:relative;
width:1200px;
margin:0 auto;
}
.w1020{
width:1020px;
margin:0 auto;
}
.w1000{
width:1000px;
margin:0 auto;
}
.w900{
width:900px;
margin:0 auto;
}
.w720{
width:720px;
margin:0 auto;
}
.w600{
width:600px;
margin:0 auto;
}
.in{
width:92%;
margin:0 auto;
}

/*====================================================
HEADER
====================================================*/
#header{
padding:2rem;
background:#000;
position:relative;
z-index:1;
}
#header .logo{
width:600px;
margin:0 auto 2rem auto;
}
#header .copy{
width:780px;
margin:0 auto;
position:absolute;
left:0;
right:0;
bottom:-20px;
filter: drop-shadow(3px 3px 3px #000);
}

.eyecatch{
position:relative;
z-index:0;
}
.ttl1{
position:absolute;
right:15%;
bottom:5%;
font-size:60px;
font-weight:bold;
writing-mode: vertical-rl;
color:#fff;
text-shadow:
    0 1px #bbb,
    1px 2px #666,
    2px 3px #666,
    3px 4px #666,
    4px 5px #666,
    5px 10px 8px #000000;
}

.eyecatch .main-photo img{
width:100%;
height:auto;
}
.eyecatch .main-photo{
margin-bottom:3rem;
}
.eyecatch h1{
margin-bottom:1rem;
font-size:36px;
}
/*====================================================
NAVIGATION
====================================================*/


/*====================================================
PAGE
====================================================*/

p{
margin-bottom:2rem;
}
.btn1{
text-align:center;
}
.btn1 a{
font-size: 1.6rem;
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
color: #fff;
background-color: #094;
}
.btn1 a.btn--green.btn--border-groove {
  border: 6px groove #008039;
}

.top2_hd{
background:#55a851;
padding:1.5rem 0;
}
.top2_hd h2{
color:#fff;
text-align:Center;
font-size:42px;
line-height:1.4;
}
.top2_hd .en{
display:block;
color:#000;
margin-bottom:0.5rem;
font-size:21px;

-webkit-text-stroke: 1px #fff;
text-stroke: 1px #fff;
paint-order: stroke;
}
.top3 h2{
font-size:48px;
background:url(../img/top3_hd.png) no-repeat center center;
background-size:cover;
text-align:center;
color:#fff;
padding:1.5rem 0;
margin-bottom:4rem;
}
.fivestars{
width:180px;
margin-bottom:0.5rem;
}
.top3 h3{
font-size:36px;
line-height:1.5;
margin-bottom:1rem;
}
ul.point li{
background:url(../img/ico-check.png) no-repeat left 5px;
background-size:32px 36px;
font-sizE:24px;
padding-left:40px;
margin-bottom:1rem;
}
.tags li{
color:#fff;
border:1px solid #123711;
background:#2c603f;
border-radius:0.5rem;
padding:0.5rem 3rem;
font-size:32px;
margin-bottom:1rem;
}
.top3 h3,h3{
margin-bottom:3rem;
}
.btn2 a{
font-size:21px;
line-height:1.6;
}


.btn2 a {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0 auto;
max-width: 520px;
padding: 10px 25px;
color: #FFF;
transition: 0.3s ease-in-out;
font-weight: 600;
background:#e4661d;
filter: drop-shadow(0px 2px 4px #ccc);
border-radius: 3px;
border-radius: 50px;
}
.btn2 a:after {
content: '';
width: 5px;
height: 5px;
border-top: 3px solid #FFF;
border-right: 3px solid #FFF;
transform: rotate(45deg) translateY(-50%);
position: absolute;
top: 46%;
right: 20px;
border-radius: 1px;
transition: 0.3s ease-in-out;
}
.btn2 a:hover {
transform: translateY(-2px);
box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
opacity:1;
}


/* modal window */
.btn_favorite a,
.modal-open{
text-align:center;
border:1px solid #999;
border-radius:5px;
height:45px;
line-height:45px;
}
.modal-container{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,50%);
padding: 40px 20px;
overflow: auto;
opacity: 0;
visibility: hidden;
transition: .3s;
box-sizing: border-box;
z-index:111;
}
.modal-container:before{
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
.modal-container.active{
opacity: 1;
visibility: visible;
}
.modal-body{
position: relative;
display: inline-block;
vertical-align: middle;
max-width: 500px;
width: 90%;
}
.modal-close{
position: absolute;
display: flex;
align-items: center;
justify-content: center;
top: -40px;
right: -40px;
width: 40px;
height: 40px;
font-size: 40px;
color: #fff;
cursor: pointer;
}
.modal-content{
background: #fff;
text-align: left;
padding: 30px;
}
.modal-container iframe{
width:100%;
height:85vh;
overflow-y:scroll;
border:none;
}
#mc2 .modal-content{
padding:0;
}


h2{
margin-bottom:1rem;
}

#site-content{
}
.iframe-aspect {
aspect-ratio: 9 / 16;
max-width: 640px;
margin-bottom:1rem;
}
.iframe-aspect iframe {
width: 100%;
height: 100%;
}
.boxlink:hover{
cursor:pointer;
}


.ytbox {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.ytbox iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tags li{
margin-right:1rem;
}
.tags li a{
display:block;
padding:0.5rem 1.5rem;
border-radius:0.8rem;
background:#f6f6f6;
font-size:90%;
}
.tags li a:before{
content:"#";
}

.gmap{
margin-bottom:1.5rem;
}



/*==================================================
FOOTER
====================================================*/
#footer{
margin-top:2rem;
padding:2rem 0 5rem 0;
background:#01608c;
color:#fff;
}
#footer a{
color:#fff;
}
.copyright{
margin-top:2rem;
}

.pager{
margin-top:2rem;
}
.pager,
.pager ul{
text-align:center;
}
.pager ul li{
display:inline-block;
margin-left:0.3rem;
color:#ccc;
}
.pager ul li:first-child{
margin-left:0;
}
.pager ul li .current,
.pager ul li a{
padding:0.2rem 0.5rem;
display:block;
font-size:21px;
border-radius:5px;
}
.pager ul li .current{
line-height:20px;
background:#01608c;
color:#fff;
border:1px solid #01608c;
}

.pager ul li a{
color:#01608c;
border:1px solid #01608c;
}
#pagetop{
position:fixed;
bottom:1rem;
right:2rem;
width:60px;
height:auto;
z-index:100001;
}

/*====================================================
FOOTER
=====================================================*/
#footer{
padding:4rem 0;
background:#3b3b3a;
color:#fff;
}
#ft_r{
position:absolute;
right:0;
bottom:0;
}
.ft_logo{
width:210px;
margin-bottom:1rem;
}

.base{
margin-top:4rem;
}
.base h2{
color:#0f8063;
font-size:24px;
margin-bottom:1rem;
}
.base h3{
font-size:21px;
margin-bottom:0.5rem;
border-bottom:1px solid #eee;
}

#fnav{
margin-top:10rem;
padding:0.8rem 0;
background:#eeeeee;
}
#fnav ul{
text-align:center;
}
#fnav ul li{
display:inline;
padding:0 0.8rem;
border-left:1px solid #ccc;
}
#fnav ul li:first-child{
border-left:0;
}
#fnav ul li a{
color:#666;
text-decoration:none;
}

/*====================================================
BASE
====================================================*/
.ctr{text-align:center;}
.tgt{text-align:right;}
.tlt{text-align:left;}
.bold{font-weight:bold;}
.mb02{margin-bottom:0.2rem;}
.mb03{margin-bottom:0.3rem;}
.mb05{margin-bottom:0.5rem;}
.mt05{margin-top:0.5rem;}
.mb1{margin-bottom:1rem;}
.mb15{margin-bottom:1.5rem;}
.mb2{margin-bottom:2rem;}
.mb25{margin-bottom:2.5rem;}
.mb3{margin-bottom:3rem;}
.mb4{margin-bottom:4rem;}
.mb5{margin-bottom:5rem;}
.mb8{margin-bottom:8rem;}
.mt2{margin-top:2rem;}
.pt05{padding-top:0.5rem;}
.pb1{padding-bottom:1rem;}
.pt1{padding-top:1rem;}
.pt2{padding-top:2rem;}
.pt4{padding-top:4rem;}
.pt6{padding-top:6rem;}
.pt8{padding-top:8rem;}
.fff{color:#fff;}
.red{color:#e95464;}
.big{font-size:150%;}
.txtlt{text-align:left;}
.txtgt{text-align:right;}
.txtctr{text-align:center;}
.txt9{font-size:9px;}
.txt10{font-size:10px;}
.txt11{font-size:11px;}
.txt12{font-size:12px;}
.txt13{font-size:13px;}
.txt15{font-size:15px;}
.txt16{font-size:16px;}
.txt18{font-size:18px;}
.txt20{font-size:20px;}
.txt21{font-size:21px;}
.txt24{font-size:24px;}
.txt25{font-size:25px;}
.txt30{font-size:30px;}
.txt32{font-size:32px;}
.lh1{line-height:1;}
.lh13{line-height:1.3;}
.lh15{line-height:1.5;}
.lh18{line-height:1.8;}
.lh20{line-height:2.0;}
.lh24{line-height:2.4;}
.ls01{letter-spacing:-1px;}
.ls02{letter-spacing:-2px;}
.ls03{letter-spacing:-3px;}
.ls04{letter-spacing:-4px;}
.ls05{letter-spacing:-5px;}
.ls06{letter-spacing:-6px;}
.size-full,
.img100 img,
.img100{
width:100%;
height:auto;
}

strike .strike{
color:#231916;
}

.shadow{text-shadow: rgba(0,0,0,0.5) 2px 2px 5px;}

.ffs{ -moz-font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
font-feature-settings: "palt";}

.none,
.sp{display:none;}
.pc{display:block;}


img.aligncenter{
margin:0 auto;
}

/*====================================================
AFTER
====================================================*/
section:after,
.breadcrumb:after,
.w980:after,
.cl:after,
.clearfix:after,
#main:after,
#nav:after,
#footer:after,
#header:after{content:".";display:block;clear:both;height:0;visibility:hidden;font-size:0;}


/*====================================================
MEDIA QUERY
====================================================*/



@media screen and (max-width: 1400px) {
.ttl1{
top:15%;
}
}
@media screen and (max-width: 1300px) {
.w1200{
width:100%;
margin:0 auto;
}
}

@media screen and (max-width: 1080px) {
.w1000{
width:100%;
}



}
@media screen and (max-width: 920px) {
.w900{
width:90%;
}
.pc{
display:none;
}
.sp{
display:block;
}
.ttl1{
position:absolute;
right:5%;
top:10%;
}
}


@media screen and (max-width: 780px) {
#pagetop{
bottom:4.5rem;
right:0.5rem;
}
#header .copy{
width:96%;
bottom:-10px;
}
}
@media screen and (max-width: 720px) {
body{
font-size:22px;
}
#spnav{
display:block;
}
#nav ul li a{
padding:1.2rem;
font-size: 115%;
}
#nav ul li ul li a{
padding-left:2rem;
}
.top2_hd h2,
.top3 h2{
font-size:36px;
}
.top3 h3{
font-size:32px;
}
.btn2 a{
max-width:100%;
font-size:24px;
}
.tags li{
font-size:24px;
}
}
@media screen and (max-width: 620px) {
.btn2{
}
}



@media screen and (max-width: 640px) {
.w600{
width:90%;
}
#header .logo{
width:100%
}
}