/*
Theme Name: myoujinyama
*/

/*============================== reset ===================================*/
html,body	{width:100%; color:#4d4d4d; font-family: "游ゴシック体", "Yu Gothic", "YuGothic", sans-serif; }
html    	{font-size:62.5%;}
*			{margin:0;padding:0;}
a			{text-decoration:none;}
ul,ol		{list-style:none;}
.clearfix		{zoom:1;}
.clearfix:after	{content:"";display:block;clear:both;}
/*========================== HTML5 reset =================================*/
/* html5doctor.com Reset Stylesheet v1.6.1*/
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,pre,address,code,del,img,small,strong,b,i,dl,dt,dd,ol,ul,li,form,label,table,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,footer,header,hgroup,menu,nav,section{letter-spacing: 0.03em;margin:0;padding:0;border:0;outline:0;vertical-align:baseline;background:transparent;}
body{line-height:1;}
article,aside,details,footer,header,hgroup,menu,nav,section{display:block;}
ul{list-style:none;}
blockquote, q {quotes:none;}
blockquote:before,blockquote:after,q:before, q:after{content:'';content:none;}
a{margin:0;padding:0;vertical-align:baseline;background:transparent; color: #333333;}
table{border-collapse:collapse;border-spacing:0;}
input,select{vertical-align:middle;}
img{vertical-align:bottom;}

.sp_none {
  display: block;
}

.pc_none {
  display: none!important;
}

.ttlEn {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.fLeft {
  float: left;
}

.fRight {
  float: right;
}

/* header */
header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999999;
  width: 100%;
  padding: 50px 0;
}

header h1 {
  float: left;
  margin-left: 30px;
}

header ul {
  float: right;
  margin-right: 30px;
}

header li {
  float: left;
  font-size: 1.3rem;
  text-align: center;
  margin-left: 95px;
}

header li a {
  color: #fff;
}

header li span {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-size: 2.1rem;
  display: block;
  margin-bottom: 7px;
  position: relative;
}

header li span::before {
  background: #fff;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
header li a:hover span::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

header.active {
  background:rgba(0,0,0,0.3);
  z-index: 9999999999;
}

/* メインビジュアル */
#mainVisual {
  position: relative;
}

#mainVisualText {
  position: absolute;
  left: 160px;
  z-index: 99999999;
  top: 36%;
  width: 39.5%;
}

#mainVisualText img {
  width: 100%;
}


.slider li {
  margin: 0 12px;
}

#mainVisual .slick-slide img {
  width: 100%;
}

.slick-slide img {
  width: 450px;
}

/* WHY */
#why {
  
  position: relative;
}


.contWhyTop {
  width: 1290px;
  margin: 0 auto 0;
  padding-top: 190px;
}

.contWhyTop h1 {
  position: relative;
}

.contWhyTop h1 span {
  position: absolute;
  font-size: 3.6rem;
  left: 0;
  top: 88px;
  letter-spacing: 0.2em;
}

.contWhyTop h2 {
  font-size: 3rem;
  letter-spacing: 0.05em;
  line-height: 60px;
  text-align: left;
  color: #77b462;
  margin: 110px 0 50px;
}

.contWhyTop p {
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 36px;
  text-align: left;
}

.whyImg {
  position: absolute;
  right: 20px;
  top: 135px;
  width: 50.2%;
}
.whyImg img {
  width: 100%;
}

.contWhyBtm {
  width: 1290px;
  margin: 140px auto 0;
}

.contWhyBtm .fRight {
  margin: 175px 0 0;
}

.contWhyBtm .fRight p {
  margin-top: 70px;
  font-family: "Josefin Sans";
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 50px;
  color: #bebebe;

}

/* WHAT */
#what {
  background-image: url(img/bg_what.png);
  background-repeat: repeat-x;
  background-size: contain;
  margin: 200px 0 0;
  padding-top: 200px;
  padding-bottom: 210px;
  background-position: top;
}

#what h1 {
  text-align: center;
  position: relative;
}

#what h1 span {
  position: absolute;
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  line-height: 46px;
  top: 77px;
  width: 100%;
  display: block;
  text-align: center;

}

#what h2 {
  font-size: 3rem;
  letter-spacing: 0.1em;
  line-height: 60px;
  text-align: center;
  color: #77b462;
  margin: 85px 0 45px;
}

#what p {
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 36px;
  text-align: center;
  margin-bottom: 120px;
}

.slider span {
  display: block;
  background-color: #fff;
  padding: 20px 35px;
  border-radius: 0 0 10px 10px;
  font-size: 1.6rem;
  width: 380px;
  line-height: 1.6;
}

.slider span strong {
  display: block;
  padding-bottom: 20px;
}

/* HOW */
#how {
  width: 1290px;
  margin: 0 auto 100px;
  padding-top: 210px;
}

#how h1 {
  position: relative;
  
}

#how h1 span {
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  line-height: 46px;
  text-align: left;
  top: 75px;
  left: 0;
  position: absolute;
}

#how h2 {
  font-size: 3rem;
  letter-spacing: 0.05em;
  line-height: 60px;
  color: #77b462;
  margin-top: 75px;
  margin-bottom: 60px;
}

#how p {
  font-weight: 500;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 36px;
}

#how ul {
  margin-top: 90px;
}

#how li {
  float: left;
  position: relative;
}

#how ul li div {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

#how ul li div p {
  font-family: "Josefin Sans";
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: 0.1em;
  text-align: left;
  color: #fff;
}

#how ul li div h3 {
  font-weight: bold;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  line-height: 30px;
  text-align: left;
  color: #fff;

}

#how ul li div h3 span {
  font-size: 1.2rem;
}

/* WHO */
#who {
  background-image: url(img/bg_who.png);
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 190px;
  padding-bottom: 190px;
  background-position: top;
}

#who h1 {
  text-align: center;
  position: relative;
}

#who h1 span {
  position: absolute;
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  line-height: 46px;
  top: 77px;
  width: 100%;
  display: block;
  text-align: center;
}

#who h2 {
  font-weight: bold;
  font-size: 2.4rem;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 130px;
  padding-bottom: 10px;
}

#who ul {
  text-align: center;
  margin-top: 50px;
}

#who ul li {
  text-align: center;
  display: inline-block;
  width: 323px;
  border-radius: 27px;
  background: #77b462;
  font-weight: bold;
  font-size: 2.0rem;
  letter-spacing: 0.05em;
  line-height: 36px;
  color: #fff;
  padding: 10px 0;
  margin: 0 25px;
}

#who p {
  width: 1420px;
  margin: 20px auto 0;
  text-align: right;
  font-size: 1.6rem;
}


/* CAMPANY */
#company {
  padding-top: 190px;
  padding-bottom: 190px;
}

#company h1 {
  text-align: center;
  position: relative;
}

#company h1 span {
  position: absolute;
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  line-height: 46px;
  top: 77px;
  width: 100%;
  display: block;
  text-align: center;
}

#company dl{
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
  flex-wrap: wrap;
  align-items: stretch; 
  width: 1290px;
  border: 1px solid #ccc;
  border-bottom: none;
  margin: 95px auto 0
  ;
}
#company dt{
  background: #E6F78A;
  padding: 30px 0 30px 45px;
  width: 194px;
  border-right: 1px solid #DDDDDD;
  border-bottom: 1px solid #DDDDDD;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 36px;
}
#company dd{
  background: #fff;
  padding: 30px 45px;
  width: calc(100% - 330px);
  border-bottom: 1px solid #DDDDDD;
  font-size: 1.6rem;
  line-height: 36px;
}

#company dd .fLeft {
  width: 130px;
}

#company dd .fRight {
  width: 830px;
}

#company dd span {
  width: 210px;
  display: inline-block;
}

/* CONTACT */
.wrap {
  background-color: #F5F5F5;
  padding: 160px 0 130px;
}

#contact {
  width: 1290px;
  margin: 0 auto;
}
#contact h2 {
font-size: 2rem;
letter-spacing: 0.2em;
line-height: 30px;
text-align: left;
color: #000;
margin: 30px 0 60px;
}

#contact img {
  vertical-align: middle;
  padding-right: 20px;
}

#contact .fLeft a {
  width: 620px;
  border-radius: 10px;
  background: linear-gradient(#87efd8 0%, #9cf0aa 48.77%, #dded6a 100%);
  display: block;
  font-family: "Josefin Sans";
  font-weight: 600;
  font-size: 5rem;
  line-height: 81px;
  text-align: left;
  color: #fff;
  padding: 30px 0;
  text-align: center;
  transition-duration: .4s;

}



#contact .fRight a {
  width: 620px;
  border-radius: 10px;
  background: linear-gradient(#87efd8 0%, #9cf0aa 48.77%, #dded6a 100%);
  display: block;
  font-family: "Josefin Sans";
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 55px;
  text-align: left;
  color: #fff;
  padding: 44px 0;
  text-align: center;
  transition-duration: .4s;
}

#contact .fLeft a:hover,
#contact .fRight a:hover {
  transform: scale(1.03);
  opacity: .8;
}



/* ACCESS */
#access {
  width: 1290px;
  margin: 0 auto;
  padding-top: 165px;
}

#access h2 {
font-size: 2rem;
letter-spacing: 0.2em;
line-height: 30px;
text-align: left;
color: #000;
margin: 30px 0 60px;
}

#access .fLeft,
#access .fRight {
  width: 572px;
}

#access iframe {
  width: 572px;
  height: 350px;
}

#access p {
  font-size: 1.6rem;
  line-height: 1.5;
}

#access p a {
  font-family: "Josefin Sans";
  position: relative;
  padding-bottom: 5px;
  font-style: normal;
}

#access p a::before {
  background: #000;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
#access p a:hover::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

#access .fLeft div,
#access .fRight div {
  margin: 30px 0;
}

/* footer */
footer {
  width: 1440px;
  padding: 60px;
  margin: auto;
}

footer .fLeft p {
  font-size: 2.4rem;
  margin-top: 40px;
  line-height: 40px;
}

footer .fLeft span {
  font-size: 1.6rem;
}

footer .fRight {
  width: 460px;
} 

footer .fRight li {
  display: inline-block;
  font-size: 1.5rem;
  margin-bottom: 50px;
}

footer .fRight ul:first-child li span {
  width: 80px;
  display: inline-block;
}

footer .fRight ul:last-child li span {
  width: 135px;
  display: inline-block;
}

footer .fRight li em {
  display: inline-block;
  font-family: "Josefin Sans";
font-weight: 500;
font-size: 2rem;
letter-spacing: 0.1em;

text-align: left;
color: #000;
position: relative;
padding-bottom: 5px;
font-style: normal;
}

footer .fRight li em::before {
  background: #000;
  content: '';
  width: 100%;
  height: 1px;
  position: absolute;
  left: 0;
  bottom: 0;
  margin: auto;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
footer .fRight li a:hover em::before {
  transform-origin: left top;
  transform: scale(1, 1);
}

footer .fRight ul {
  width: 200px;
  float: left;
  margin-left: 30px;
}

@media all and (max-width: 1100px) {
  .pc_none {
    display: block!important;
  }

  .sp_none {
    display: none!important;
  }
}

/* TAB */
@media all and (max-width: 1500px) {
  #who ul.listBtm li {
    margin-bottom: 50px;
  }
  #who p {
    width: 95%;
  }
  footer {
    width: auto;
  }
}

@media all and (max-width: 1130px) {
  #contact .fLeft,
  #contact .fRight {
    float: none;
    text-align: center;
  }

  #who ul li {
    display: block;
    width: 94%;
    margin-bottom: 20px;
  }
   #who ul.listBtm {
    margin-top: 0;
   }
  #who ul.listBtm li {
    margin: 0 3% 20px;
  }

  #access .fLeft, #access .fRight {
    width: 572px;
    float: none;
    margin: auto;
}
}
/* SP */
@media all and (max-width: 770px) {
header {
  padding: 6% 0;
}

header h1 {
  margin-left: 4%;
    width: 44%;
}

header h1 img {
  width: 100%;
}

header ul {
  float: none;
  margin-right: 0;
  margin-top: 20%;
}
header .btn-gnavi {
    position: absolute;
    top: 28%;
    right: 20px;
    width: 30px;
    height: 24px;
    z-index: 9999999999;
    box-sizing: border-box;
    cursor: pointer;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
header .btn-gnavi span {
    position: absolute;
    width: 30px;
    height: 1px;
    background: #fff;
    border-radius: 10px;
    -webkit-transition: all 400ms;
    transition: all 400ms
}
header .btn-gnavi span:nth-child(1) {
    top: 0
}
header .btn-gnavi span:nth-child(2) {
    top: 10px
}
header .btn-gnavi span:nth-child(3) {
    top: 20px
}

header .btn-gnavi.open span:nth-of-type(1) {
    top: 0;
    left: 0;
    transform: translateY(6px) rotate(-45deg);
    width: 100%;
}

header .btn-gnavi.open span:nth-of-type(2) {
  opacity: 0;/*真ん中の線は透過*/
}

header .btn-gnavi.open span:nth-of-type(3){
    top: 12px;
    left: 0;
    transform: translateY(-6px) rotate(45deg);
    width: 100%;
}

header li {
  float: none;
  margin-left: 0;
  margin-bottom: 9.5%;
}

header li span {
  margin-bottom: 2.7%;
}


header nav {
    position: fixed;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    padding-top: 3%;
    font-size: 16px;
    box-sizing: border-box;
    z-index: 999999999;
background: transparent;
opacity: 1;
background-image: linear-gradient(150deg, rgba(135, 239, 216, 0.9), rgba(156, 240, 170, 0.9) 48%, rgba(221, 237, 106, 1));
/* Note: currently only Safari supports backdrop-filter */
backdrop-filter: blur(15.009400367736816px);
--webkit-backdrop-filter: blur(15.009400367736816px);
/* (plus shape's fill blended on top as a separate layer with 74.05% opacity) */

}

header h3 {
      text-align: center;
      padding :5% 0;
}

#global-navi p {
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
}

#mainVisualText {
  left: 50px;
  width: 78%;
}

#mainVisualText img {
  width: 100%;
}



.contWhyTop h1 span {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  top: 49%;
  left: 2%;
}

#why {
    position: relative;
    width: 87%;
    margin: auto;
}


.contWhyTop h1 img {
  width: 83%;
}

.contWhyBtm .fRight h2 img {
  width: 83%;
}

.whyImg {
  position: static;
  width: 100%;
  margin-top: 12.5%;
}

.contWhyBtm .fLeft,
.contWhyBtm .fRight {
  float: none;
}

.contWhyBtm .fLeft img {
  width: 100%;
}

#what h1 img {
  width: 85.1%;
}

.slider span strong {
  padding-bottom: 15px;
}

.slider span {
  width: 92%;
        padding: 15px 4%;
        line-height: 1.5;

}

.slider li {
  margin: 0;
}

.slider li img {
  width: 100%;
}

.contWhyTop,
.contWhyBtm {
  width: 100%;
  
}
.contWhyBtm {
  margin: 20% auto 0;
}

.contWhyBtm .fRight {
  margin-top: 0;
}

.contWhyBtm .fRight h2 img {
  width: 83%;
}

.contWhyBtm .fRight p {
      margin-top: 16%;
}

.contWhyBtm .fRight p {
font-weight: 500;
font-size: 1.3rem;
line-height: 27px;

}

.contWhyBtm .fLeft {
  margin-top: 16%;
}

.contWhyTop {
  padding-top: 26%;
}

.contWhyTop h2 {
  font-size: 1.6rem;
  line-height: 32px;
  margin: 12% 0 9%;
}

.contWhyTop p {
  font-size: 15px;
  letter-spacing: 0.05em;
  line-height: 30px;
}

#what {
  padding-top: 11%;
  margin-top: 0%;
padding-bottom: 20%;
}

#what #wrap {
  width: 87%;
  margin: 22% auto 0;
}

#what h1 span {
font-size: 1.6rem;
letter-spacing: 0.2em;
line-height: 46px;
top: 30%;
}

#what h2 {
font-size: 1.6rem;
letter-spacing: 0.1em;
line-height: 60px;
margin: 11% 0 8%;
}

#what p {

font-size: 1.5rem;
letter-spacing: 0.05em;
line-height: 30px;
text-align: left;
color: #000;
margin-bottom: 12%;

}

#how {
  width: 86.8%;
  margin: auto;
  padding-top: 21%;
}

#how h1 img {
  width: 83%;
}

#how h1 span {
font-size: 1.6rem;
letter-spacing: 0.2em;
top: 33%;
    left: 2%;
}

#how h2 {
font-size: 1.6rem;
letter-spacing: 0.05em;
line-height: 32px;
margin: 12% 0;
}

#how p {
font-size: 1.5rem;
letter-spacing: 0.05em;
}

#how ul {
  margin-top: 12%;
  margin-bottom: 25%;
}

#how ul img {
  width: 100%;
}


#who {
  padding: 23% 0;
}

#who h1 img {
  width: 74.7%;
}

#who h1 span {
font-size: 1.6rem;
letter-spacing: 0.2em;
line-height: 46px;
top: 20%;
}

#who h2 {
font-size: 1.6rem;
letter-spacing: 0.1em;
line-height: 32px;
margin-top: 11%;
}

#who ul {
  width: 75%;
  margin: 11% auto 0;
}

#who ul li {
  width: 100%;
  margin: 0 0 7%;
}

#who ul.listBtm li {
  margin: 0 0 7%;
}

#who p {
  text-align: center;
  margin: 9% auto 0;
}

#company {
  padding: 23% 0;
}

#company h1 span {
font-size: 1.6rem;
letter-spacing: 0.2em;
line-height: 46px;
top: 1%;
}

#contact {
  width: 100%;

}

#how .fLeft,
#how .fRight {
  float: none;
}

#how li {
  float: none;
}

#company h1 img {
  width: 86.8%;
}

#company dl {
  display: block;
  margin-top: 11%;
  border: none;
}

#company dl {
  width: 88%;
  padding: 2% 6%;
}

#company dt,
#company dd {
  width: 88%;
        padding: 2% 6%;
}

#company dt {
  border-right :none;
}

#company dd .fLeft,
#company dd .fRight {
  width: 100%;
  float: none;
}

#company dd span {
  width: 49%;
        display: inline-block;
        font-size: 1.5rem;
}

.wrap {
  padding: 23% 0;
}

#contact {
  width: 86.8%;
  margin: auto;
}

#contact h1 img {
  width: 93%;
  padding-right: 0px;
}

#contact h2 {
font-size: 1.6rem;
letter-spacing: 0.2em;
line-height: 30px;
margin: 6% 0 12%;
}

#contact .fLeft a,
#contact .fRight a {
  width: 100%;
  font-size: 10px;
}
#contact .fLeft a{
font-size: 3.2rem;
line-height: 81px;
padding: 0% 0;
}

#contact .fRight a {
  font-size: 1.6rem;
line-height: 81px;
padding: 0% 0;

}

#contact .fRight {
  margin-top: 12%;
}

#contact .fRight a img {
  width: 7%;
    padding-right: 4%;
}

#contact .fLeft a img {
  width: 10%;
}

#access {
 width: 86.8%;
        margin: 19% auto 0;
        padding-top: 0;
}

#access h1 img {
  width: 76%;
}

#access h2 {
font-size: 1.6rem;
letter-spacing: 0.2em;
line-height: 30px;
margin: 6% 0 12%;
}

#access p {
font-size: 1.5rem;
letter-spacing: 0.05em;
line-height: 30px;

}

#access .fRight {
  margin: 19% auto 0;
}


#access .fLeft, #access .fRight {
  width: 100%;
}

#access iframe {
  width: 100%;
  aspect-ratio: 16/9; //アスペクト比（縦横比）を指定
}

footer {
        width: 87%;
        padding: 23% 0;
    }

footer .fLeft img {
  width: 100%;
}

footer .fLeft,
footer .fRight {
  float: none;
}

footer .fRight {
    width: 100%;
}

footer .fRight ul {
    width: 50%;
    float: left;
    margin-left: 0;
}

    footer .fRight ul:first-child li span {
        width: 37%;
    }

    footer .fRight li {
        font-size: 1.3rem;
        width: 100%;
    }
footer .fRight ul:last-child li span {
    width: 60%;
    display: inline-block;
}

footer .fRight li em {
  font-size: 1.4rem;
}

footer .fLeft p {
  font-size: 1.6rem;
          line-height: 1.5;
}
footer .fLeft span {
  font-size: 1.2rem;
}

.slick-img img {
  height: 100vh;
  margin: auto;
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}

}