@charset "UTF-8";
/* CSS Document */


/*------------------------------------

main slider

------------------------------------*/
.swiper-container {
    width: 88%;
    height: 800px;
    position: relative;
    margin-bottom: 80px;
}
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
/*    background-color: #eee;*/
}
.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.swiper-pagination {
    position: absolute;
    width: 15px !important;
    left: auto !important;
    right: -45px;
    top: auto !important;
    bottom: -80px !important;
    transform: translateY(-60%);
    width: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    background-color: #fff;
    border-radius: 0;
    margin: 5px 0 !important;
    opacity: 0.7;
    transition: background-color 0.3s;
}
.swiper-pagination-bullet-active {
    background-color: #808080;
    opacity: 1;
}

/*------------------------------------

fade_in.js

------------------------------------*/
.fade-up-element {
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
}
.is-inview {
    opacity: 1;
    transform: translateY(0);
}

/*------------------------------------

重要なお知らせ

------------------------------------*/

.important-news_area{
	border: 2px #ccc solid;
    padding: 20px;
	max-width: 1200px;
	margin: 0 auto;
	margin-bottom: 80px;
	background-color: #F3F3F3;
}

.important-news_area h4{
    font-size: 24px;
    margin-top: 50px;
    color: #323232;
}
.important-news_area p{
	font-size: 16px;
    text-align:left;
    line-height: 1.7;
}

.txt_area{

}
/*------------------------------------

youtube

------------------------------------*/
section#youtube{
	padding-top: 0;
}
.responsive {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* ↓ 16:9 のアスペクト比を維持するための記述 */
  padding-top: 56.25%; /* 9 ÷ 16 = 0.5625 */
}
.responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* スクロール中に iframe の pointer-events を無効にするためのクラス */
.responsive.disable-interaction iframe {
    pointer-events: none;
}

/* --- ここからYouTubeプレイヤー関連の追加スタイル --- */

.youtube-player .youtube-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像がコンテナにフィットするように */
  transition: opacity 0.3s ease-in-out;
  z-index: 1; /* iFrameの上に表示 */
}

/* ホバー時のカバー画像 */
.youtube-player:hover .youtube-cover {
  opacity: 0.8;
}

/* ★★★ ここから再生ボタンのスタイルです。すべて非表示にします ★★★ */
.youtube-player .play-button {
  display: none; /* ★ これにより、再生ボタンは初期表示もホバー時も表示されません */
  /* 以下はdisplay:none;があるので実質無効ですが、
     もし将来的にボタンを表示したくなった時のために残しておいても良いでしょう */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px; /* 再生ボタンの幅 */
  height: 48px; /* 再生ボタンの高さ */
  background-color: rgba(230, 33, 23, 0.8); /* 赤色の半透明 */
  border-radius: 6px;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease-in-out;
  z-index: 2; /* カバー画像とiFrameの上に表示 */
}

.youtube-player .play-button::before {
  display: none; /* ★ 三角形のアイコンも非表示 */
  content: '';
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #fff; /* 白い三角形 */
  margin-left: 5px; /* 三角形の位置調整 */
}

/* ホバー時の再生ボタン */
.youtube-player:hover .play-button {
  display: none; /* ★ ホバー時も非表示 */
  background-color: rgba(255, 0, 0, 0.9);
  transform: translate(-50%, -50%) scale(1.1); /* 少し拡大 */
}
/* ★★★ 再生ボタンのスタイルはここまで ★★★ */


/* アクティブ（動画がロードされた後）になったらカバーとボタンを非表示 */
.youtube-player.active .youtube-cover,
.youtube-player.active .play-button { /* play-buttonは既にdisplay:noneですが、一応 */
  display: none;
}

/*------------------------------------

content

------------------------------------*/
#hero article h2 {
    position: absolute;
    top: 0;
/*    right: 10px;*/
    right: calc(100% - 102%);
}
#hero article h2 img {
    width: 123px;
    height: auto;
}
#hero article h3 {
    position: absolute;
/*
    top: 0;
    left: 100px;
*/
	top: 50px;
    left: 110px;
}
#hero article h3 img {
    width: 280px;
    height: auto;
}
.box {
    position: relative;
}
.box.sec01 {
    padding-bottom: 550px;
}
.box.sec02 {
    padding-bottom: 285.5px;
    margin-bottom: 100px;
}
.head_img_01 {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 700px;
}
.head_img_02 {
    display: block;
    position: absolute;
    bottom: -285.5px;
    left: 0;
    width: 490px;
}
.head_img_03 {
    display: block;
    position: absolute;
    bottom: 0;
    right: 60px;
    width: 230px;
}
.head_img_04 {
    display: block;
    position: absolute;
    bottom: 0;
    right: 410px;
    width: 230px;
}
article h2.title {
    font-size: 44px;
    text-align: left;
    margin-bottom: 60px;
}
article h2.title span {
    display: inline-block;
    padding-left: 20px;
    padding-right: 20px;
    margin-left: 20px;
    font-size: 20px;
    border-left: solid 1px #323232;
    border-right: solid 1px #323232;
}
.lineup_area {
    display: flex;
    justify-content: center;
}
.lineup_area.other{
	margin-top: 100px;
    justify-content: space-evenly;
}

.lineup_area h4{
    letter-spacing: 0.8rem;
}
.lineup_area .itiran{
    letter-spacing: 0.3em;
	    font-weight: 400;
}
.lineup_area li {
    display: flex;
    flex-direction: column;
    width: 380px;
	justify-content: space-between;
    align-items: center;

}
.lineup_area li p {
    line-height: 2;
    text-align: left;
    width: 66%;
    margin: 0 auto 80px;
    letter-spacing: 1px;
	flex-grow: 1;
}
.rounded-frame {
    width: 80%;
    overflow: hidden;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #333;
}

/* news */
.news_area {
    overflow: hidden;
}
.my-second-slider {
    width: 100%;
    height: 20em;
    position: relative;
    margin: 0 auto;
}
.my-second-slider .swiper-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}
.my-second-slider .swiper-wrapper .news_list {
    width: 100%;
    background-color: #F5F5F5;
    text-align: left;
}
.my-second-slider .swiper-wrapper .news_list li{
	width: 100%;
	height: auto;
    margin: 1em 0;
	border-bottom: 1px solid #999;
}
.my-second-slider .swiper-wrapper .news_list li+li{
    border-bottom: solid;
}
.my-second-slider .swiper-wrapper .news_list .date {
    margin-bottom: 1em;
}
.my-second-slider .swiper-wrapper .news_list .txt {
    line-height: 1.5;
    margin-bottom: 1em;
}
.swiper-navigation-icon {
    display: none;
}
.my-second-slider-button-next,
.my-second-slider-button-prev {
    width: 15px;
    height: 17px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 1;
    color: inherit;
    z-index: 10 !important;
}
    .swiper-button-next, .swiper-button-prev {
        top: var(--swiper-navigation-top-offset, 55%)!important;
    }
.my-second-slider-button-prev {
    left: -30px !important;
    background-image: url(common/images/icon_arrow_left.png);

}
.my-second-slider-button-next {
    right: -30px !important;
    background-image: url(common/images/icon_arrow_right.png);
}

/*newsコンテンツホバー時*/
.my-second-slider .swiper-slide:hover img{
	transform: scale(1.1);
}


/* マウスホバー */
.rounded-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease-out;
    transform-origin: center center;
}
.rounded-frame:hover img {
    transform: scale(1.1); /* ★1.1倍に拡大する (値は調整可能) */
    /* 例えば、もっと大きくするなら transform: scale(1.2); */
}

/* グリッドの親要素 */
.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: 100px;    /* 上下の隙間を40pxに指定 */
  column-gap: 50px; /* 左右の隙間は20pxのまま */
}
/* 2段目の下だけ余白を広くする */
.grid-container .block:nth-child(2),
.grid-container .block:nth-child(3) {
  margin-bottom: -50px;
}
/* 2列分またがるブロック（100%幅） */
.item-full {
  grid-column: 1 / 3;
}


/*------------------------------------

tb sp

------------------------------------*/


/* より一般的なタブレット範囲を対象にする場合（例: 768px から 1200px） */
@media only screen and (min-width: 768px) and (max-width: 1480px) {
	
/*------------------------------------

main slider

------------------------------------*/
.swiper-container {
    width: 80%;
    height: 800px;
    position: relative;
    margin-bottom: 80px;
}

	#hero article h2 {
		right: calc(100% - 94%);
        width: 10%;
    }
	
.head_img_01 {
    width: 50%;
}
#hero article h3 {
    left: calc(100% - 90%);
    width: 30%;
}
	
.head_img_02 {
    bottom: -190.5px;
}
	
.head_img_03 {
    bottom: -40px;
    right: 60px;
    width: 210px;
}
.head_img_04 {
    bottom: -40px;
    right: 410px;
    width: 210px;
}
/*------------------------------------

商品情報

------------------------------------*/	
	.lineup_area li {
		width: 30%;
	}
	.rounded-frame {
/*		width: auto;*/
		width: 80%;
		height: auto;
	}
}

@media only screen and (min-width: 768px) and (max-width: 1300px) {
	.home #hero {
    padding-top: 100px;
	}
}
/* スマートフォン版のスタイル */
  @media screen and (max-width: 767px) {
   
	.home #hero {
    padding-top: 60px;
	}
    .swiper-container {
        width: 100%;
        height: 700px;
    }
    #hero article h2 {
        position: relative;
        width: 50%;
        left: 50%;
    }
    #hero article h2 img {
        width: auto;
        height: 200px;
    }
	  #hero .btn{
		  margin-bottom: 50px;
	  }
    .box.sec01 {
        position: relative;
        top: -200px;
        left: 0;
    }
    .box.sec01 .head_img_01 {
        width: 50%;
        top: 0;
        right: auto;
        left: 0;
    }
    .box.sec01 .head_img_02 {
        width: 50%;
        padding-left: 10%;
        top: 160px;
        right: auto;
        left: 0;
    }
    .box.sec02 {
        position: relative;
        top: -450px;
        left: 0;
        padding-bottom: 0;
        margin-bottom: -80px;
    }
    .box.sec02 .head_img_03 {
        width: 45%;
        top: 0;
        bottom: auto;
        right: 5%;
        max-width: 200px;
    }
    .box.sec02 .head_img_04 {
        width: 45%;
        top: 160px;
        bottom: auto;
        right: 5%;
        max-width: 200px;
    }
    body.home #hero article h3 {
        position: absolute;
        width: 50%;
        height: 400px;
        font-size: 16px;
        letter-spacing: 10px;
        top: 300px;
        left: 0px;
    }
    #hero article h3 img {
        width: 180px;
    }
    #youtube.content-section {
        padding: 0;
        margin-bottom: 60px;
    }
    #news.content-section {
        padding-left: 0;
        padding-right: 0;
    }
    article h2.title {
        text-align: center;
        line-height: 1.5;
    }
    article h2.title span {
        display: inline-block;
    }
    #services article h2.title span {
        display: inline-block;
        margin-left: 100px;
        margin-right: 100px;
    }
	  
	.btn:first-of-type {
        margin-bottom: 50px;
    }
	.btn a {
	  padding: 25px 110px 25px 60px;
	 }
    #services article .more {
        display: none;
    }
    .my-second-slider {
        width: 82%;
        height: auto;
    }
    .my-second-slider .swiper-slide {
        display: block;
    }
    .my-second-slider .swiper-slide .img-box {
/*        width: 100%;*/
		width: 60%;
    }
    .my-second-slider .swiper-slide .box {
        width: 100%;
    }
    .more {
        top: auto;
        bottom: -40px;
        left: 50%;
        width: 60%;
        max-width: 220px;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    .lineup_area {
        display: block;
    }
    .lineup_area li {
        width: 100%;
        margin-bottom: 80px;
    }
    .rounded-frame {
        width: 315px;
        height: 420px;
        margin: 0 auto;
    }
    .grid-container {
        display: block;
    }
    .grid-container div,
    .grid-container .block:nth-child(2),
     .grid-container .block:nth-child(3) {
        margin-bottom: 40px;
    }

}