@charset "utf-8";

*{
margin:0;
padding:0;
font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", sans-serif;
}

img{
width: 100%;/*（５）プロパティをmax-width→widthに変更*/
height: auto;
vertical-align: bottom;
}

iframe{
vertical-align: bottom;
}

body{
min-width: auto;/*（６）値を1080px→autoに変更*/
background-color:#F8B62D;/*（７）背景画像を入れる*/
background-color:#FB7000;
}

.contents{
max-width:768px;
margin: 0 auto;
box-shadow:0 0 16px 0 rgba(0,0,0,.25);/*（８）影をつける*/
background-color:cornsilk;/*（７）背景色を入れる*/
}

.container{
width: 90%;/*（８）値を1080px→90%に変更*/
margin: 0 auto;
}

h1{
width: 350px;
}

nav ul{
display: flex;
list-style-type: none;
align-items: flex-end;
text-align: center;
font-size:12px;
margin: 10px 0; 
}

nav ul img{
width: 40px;
}

nav a{
color: #000;
text-decoration: none;
padding: 10px;
display: block;
}

nav a:hover{
background-color: rgba(251,112,0,.55);
}

.hamburger {
  width: 32px;
  height: 24px;
  position: relative;
  background: none;
  border: none;
}

.line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background:#4D4D4D;
  transition: 0.3s;
}

.line:nth-child(1) { top: 0; }
.line:nth-child(2) { top: 10px; }
.line:nth-child(3) { bottom: 0; }

/* 開いた状態 */
.hamburger.active .line:nth-child(1) {
  transform: rotate(45deg);
  top: 10px;
}
.hamburger.active .line:nth-child(2) {
  opacity: 0;
}
.hamburger.active .line:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 10px;
}

/* デフォルト（モバイル） */
.nav {
  display: none;
}

/* 開いた状態 */
.nav.active {
  display: block;
}

/* PC */
@media screen and (min-width: 769px) {
  .hamburger {
    display: none;
  }
  .nav {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  nav ul{
    flex-direction: column;
    align-items: center;
  }

  .nav {
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    background-color:rgba(255,248,220,.80);

    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav.active {
    max-height: 300px;
  }
}

header {
  position: relative;
}

header{
/*height: 80px;*//*（９）コメント化*/
background-color: cornsilk;
}

header .container{
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
}

.main-visual{
background-image: url(../images/main-visual.jpg);
height: 720px;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}

.main-visual h2{
color: cornsilk;
/*color: #F8B62D;*/
font-size: 54px;
margin-bottom: 16px; 
}

/*.main-visual p{
font-size: 20px;
margin-bottom: 16px;
}*/

.btn a{
background-color: #F8B62D;
color: #fff;
text-decoration: none;
padding: 10px 40px;
display: inline-block;
border-radius: 9999px;
}

.btn a:hover{
background-color:#FB7000;
}

section h2{
color: #6A3906;
font-size: 32px;
margin-bottom: 60px;
text-align: center;
}

.bnr{
padding:80px 0;
}

.bnr ul{
/*display: flex;*//*（１０）コメント化*/
list-style-type: none;
/*justify-content: space-between;*//*（１１）コメント化*/
}

.media{
background-color: cornsilk;
background-color:#FB7000;
background-color: #F8B62D;
padding: 60px 0;
}

.mediaCard{
/*display: flex;*//*（１２）コメント化*/
/*justify-content: space-between;*//*（１３）コメント化*/
align-items: center;
}

.mediaCard__video{
/*width:640px;*//*（１４）コメント化*/
/*background-color:#fc6;*/
background-color: cornsilk;
}

.mediaCard__text{
/*width:400px;*//*（１５）コメント化*/
/*background-color:#cf6;*/
background-color: cornsilk;
text-align: center;
}

.mediaCard__text h2{
color: #FB7000;
margin-bottom: 16px;
padding-top: 12px;
}

.mediaCard__text p{
font-size:20px;
} 

.mediaCard__text .btn{
padding: 12px 0;
}

.point{
padding: 60px 0;
}

.point h2{
color: #6A3906;
}

.point ul{
/*display: flex;*//*（１６）コメント化*/
list-style-type: none;
/*justify-content: space-between;*//*（１７）コメント化*/

}

.point li{
/*width:300px;*//*（１８）コメント化*/
color:cornsilk;
text-align: center;
padding: 40px;
margin-bottom: 80px;
background-color:#d22f2f;
border-left: 25px solid #d2cc2f;
}

.point ul div{
/*width: 240px;*//*（１９）コメント化*/
margin: 0 auto 30px;
border-radius: 50%;
overflow: hidden;
}

.gallery{
background-color: #F8B62D;
padding: 80px 0;
}

.gallery .container{
  width: 95%;
}

.slider{
  background-color: cornsilk;   /* 好きな色 */
  padding: 8px 12px;               /* 上下左右に余白 */
  border-radius: 12px;         /* 角丸（任意） */
}

/* スライド間の余白 */
.slider .slick-slide{
  margin: 0 8px; /* 左右に12pxずつ */
}

/* はみ出た分を吸収（必須） */
.slider .slick-list{
  margin: 0 -8px;
}

.slider .slick-center{
  transform: scale(1.05);
}

.slider .slick-slide img{
  opacity: .4;
  transition: opacity .3s;
}

.slider .slick-center img{
  opacity: 1;
}

footer{
background-color: cornsilk;
padding: 60px 0;
}

.footer__logo{
  max-width: 60%;
  margin: 0 auto 40px; /* ← ここが重要 */
  padding: 0 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}


footer ul{
display: flex;
list-style-type: none;
justify-content: center;
margin-top:20px;
}

footer a{
font-size: 12px;
color: #000;
text-decoration: none;
padding: 0 20px;
border-left:1px solid #000;
border-right: 1px solid #000;
margin-left: -1px;
}

footer a:hover{
text-decoration: underline;
}

footer p{
text-align: center;
font-size: 10px;
margin:20px 0;
}



/*（２１）YouTubeを％幅に対応させるため、以下のコードを加える*/
.media-card__video-inner{
width:100%;
padding-top: 56.25%;
position: relative;
}
.media-card__video-inner iframe{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}