@charset "utf-8";
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url("https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.10.0/css/lightbox.css");
@import url("https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");


@keyframes animation1 {
	0% {left: -200px;}
	100% {left: 0px;}
}

@keyframes opa1 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}


body * {box-sizing: border-box;}
html,body {
	height: 100%;
	font-size: 13px;	/*基準となるフォントサイズ。*/
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 62.5%;
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:769px) {

	html, body {
		font-size: 16px;	/*基準となるフォントサイズ。*/
	}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "Segoe UI", Tahoma, Verdana, sans-serif, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック";
	-webkit-text-size-adjust: none;
	background: #fff;
	color: #3e3e3e;
	line-height: 1.67;
}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}
table {border-collapse:collapse;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
video {max-width: 100%;}
iframe {width: 100%;}
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}


a {
	color: #3e3e3e;
	transition: 0.3s;
}

a:hover {
	filter: brightness(1.1);	/*少しだけ明るくする*/
}


#container {
	height: 100%;
	display: flex;	/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	justify-content: space-between;	/*並びかたの種類の指定*/
	margin: 0 auto;
}

main {
	margin: 2rem 0;
}
	

/*スライドショー
---------------------------------------------------------------------------*/
        /* 画像をフル画面表示するためのスタイル */
        #full-image-container {
          position: relative;
          width: 100%;
          height: 100vh; /* ビューポートの高さに合わせる */
          overflow: hidden;
      }

      #full-image-container img {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          height: 100%;
          object-fit: cover; /* 画像をアスペクト比を保ったままフル画面表示 */
          transform: translate(-50%, -50%);
      }


       /* テキストのスタイル */
       #text-container {
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
        color: #fff;
    }

    #text-container h1 {
        font-size: 3.5em;
        font-weight: lighter;
        letter-spacing: 0.1em;
    }


    #full-text-container {
      position: relative;
      width: 100%;
      height: auto;
      margin:40px auto;
      font-size: 1.2em;
      overflow: hidden;
      text-align: center;
      letter-spacing: 0.18em;
  }


    /* レスポンシブ対応 */
    @media (max-width: 768px) {
        #text-container h1 {
            font-size: 8.6em;
            font-weight: 400;
        }

        #full-text-container {
          position: relative;
          width: 100%;
          height: auto;
          margin:40px auto;
          font-size: 2.6em;
          overflow: hidden;
          text-align: center;
          letter-spacing: 0.18em;
      }
    
    }

/*list-square-parts
---------------------------------------------------------------------------*/
/*listブロックを囲む外側のボックス*/
.list-square-parts {
	display: grid;
	max-width: 1000px;
	margin: 10% auto 10%;
	grid-template-columns: repeat(4, 1fr);	/*ここの「4」の数字が横に並べる数です。3列がいいなら(3, 1fr)です。*/
	gap: 1rem;	/*マージン的な数値。サムネイル間を１文字分あけます。*/
}

/*ボックスを正方形にトリミングする為の指定なので変更しない。*/
.list-square-parts .list-parts {
	position: relative;
	overflow: hidden;
	height: 0;
	padding-top: 100%;
	border-radius: 10px;	/*角を丸くする指定。通常の四角形がよければこの１行削除。*/
	box-shadow: 2px 2px 3px rgba(0,0,0,0.1);	/*ボックスの影。右へ、下へ、ぼかし幅。0,0,0は黒の事で0.1は色が10%出た状態。*/
}
.list-square-parts .list-parts a {
	display: block;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
}
.list-square-parts .list-parts img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: 0.5s;	/*マウスオン時にかける時間。0.5秒。*/
}

/*マウスオン時の画像*/
.list-square-parts .list-parts img:hover {
	transform: scale(1.1);	/*1.1倍に拡大*/
	filter: contrast(1.3);	/*コントラストを1.3倍*/
}

@media screen and (min-width: 769px) {
    .sp {
      display: none !important
    }
    body {
      width: 100%;
      background-color: #fff
    }
    .flex_box {
      position: relative;
      display: flex;
      justify-content: space-between;
      margin: 0
    }
    .flex_box.start {
      justify-content: start
    }
    .flex_box.a_center {
      align-items: center
    }
    .flex_box.wrap {
      flex-wrap: wrap
    }
    .flex_box .unit {
      width: 49%
    }
    @-webkit-keyframes bgroop {
      from {
        background-position: 0 0
      }
      to {
        background-position: -1956px 0
      }
    }
    @keyframes bgroop {
      from {
        background-position: 0 0
      }
      to {
        background-position: -1956px 0
      }
    }

#mv_area {
	position: relative;
	width: 100%;
	background-image: url(../images/carlo_petimo/bg_mv.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	z-index: 0
  }
  #mv_area .roop {
	position: fixed;
	top: 408px;
	width: 100%;
	height: 251px;
	background: url(../images/carlo_petimo/bg_mv_wave.png) repeat-x;
	background-size: 1440px 251px;
	background-position: 0 0;
	-webkit-animation: bgroop 60s linear infinite;
	animation: bgroop 60s linear infinite;
	z-index: -1
  }
  #mv_area .mv01 {
	position: -webkit-sticky;
	position: sticky;
	top: 173px;
	width: 100%;
	height: calc(100vh - 173px);
	min-height: 740px;
	margin: 0 auto;
	overflow: hidden;
	z-index: 1
  }
  #mv_area .mv01 .image {
	position: absolute;
	width: 975px;
	left: 50%;
	bottom: 0;
	opacity: 0;
	transform: translateX(-50%);
	z-index: -1
  }
  #mv_area .mv01 .image img {
	width: 975px;
	height: calc(100vh - 173px)
  }
  #mv_area .mv01 .image:nth-of-type(1) {
	-webkit-animation: change-img-anim 10s infinite;
	animation: change-img-anim 10s infinite;
	-webkit-animation-delay: 0s;
	animation-delay: 0s
  }
  #mv_area .mv01 .image:nth-of-type(2) {
	-webkit-animation: change-img-anim 10s infinite;
	animation: change-img-anim 10s infinite;
	-webkit-animation-delay: 5s;
	animation-delay: 5s
  }
  @-webkit-keyframes change-img-anim {
	0% {
	  opacity: 0
	}
	10% {
	  opacity: 1
	}
	50% {
	  opacity: 1
	}
	60% {
	  opacity: 0
	}
	100% {
	  opacity: 0
	}
  }
  @keyframes change-img-anim {
	0% {
	  opacity: 0
	}
	10% {
	  opacity: 1
	}
	50% {
	  opacity: 1
	}
	60% {
	  opacity: 0
	}
	100% {
	  opacity: 0
	}
  }
  #mv_area .mv01 h1 {
	width: 100%;
	max-width: 1085px;
	height: calc(100vh - 173px);
	margin: 0 auto;
	background: url(../images/carlo_petimo/ttl_mv.png) no-repeat center;
	background-size: 1085px 740px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
  }
  #mv_area .mv01 h1 span {
	display: none
  }
  @-webkit-keyframes fuwafuwa {
	0%, 100% {
	  transform: translateY(0)
	}
	50% {
	  transform: translateY(-20px)
	}
  }
  @keyframes fuwafuwa {
	0%, 100% {
	  transform: translateY(0)
	}
	50% {
	  transform: translateY(-20px)
	}
  }
  #mv_area .mv01 #scroll_btn {
	display: none;
	position: absolute;
	bottom: 25px;
	right: 18px;
	width: 28px;
	height: 100px
  }
  #mv_area .mv01 #scroll_btn a {
	display: block;
	width: 28px;
	height: 100px;
	background: url(../images/carlo_petimo/txt_scroll.png) no-repeat center top;
	background-size: 28px 100px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation: 3s fuwafuwa infinite;
	animation: 3s fuwafuwa infinite
  }
  #mv_area .mv01 #scroll_btn a span {
	display: none
  }
  #mv_area .mv02 {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	background-image: url(../images/carlo_petimo/bg_mv_02.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
	z-index: 1
  }
  
  #mv_area .mv02 .inner {
	width: 100%;
	max-width: 1273px;
	height: 900px;
	margin: 0 auto;
	padding: 120px 0 0;
	background: url(../images/carlo_petimo/img_mv_02.png) no-repeat center 350px;
	background-size: 1273px 475px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
  }

  #mv_area .mv02 p {
    color: #3e3e3e;
    font-size: 1.4em;
    line-height: 2.125;
    text-align: center
  }

  #mv_area .mv02 span {
    display: inline-block;
    background-color: #fff;
    color: #212529;
    font-weight: 300;
    box-sizing: border-box;
    padding: 5px 20px;
    margin-bottom: 10px;
    font-feature-settings: 'palt' 1;
    letter-spacing: 0.167em;
  }

  #mv_area .mv03 {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	width: 100%;
	height: 900px;
	background-image: url(../images/carlo_petimo/bg_mv_03.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
	overflow: hidden;
	z-index: 1
  }
  #mv_area .mv03 .inner {
	width: 100%;
	height: 900px;
	margin: 0 auto;
	padding: 136px 0 0;
	background: url(../images/carlo_petimo/bg_mv_03.png) no-repeat center;
	background-size: 2880px 318px;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden
  }

  #mv_area .mv03 p {
	color: #fff;
	font-size: 16px;
	line-height: 2.125;
	text-align: center
  }

  #mv_area .mv03 p.attention {
	margin-bottom: 406px;
	font-size: 24px;
	line-height: 1.75
  }


  /*ダイニングソファにありがちな、様々なお悩み（PC）*/
  .future_container {
    max-width: 1080px;
    background-color: #f0f0f0;
    margin: 10% auto; 
  }

  .future_container .data-title {
    background-color: #b5b5b5;
    text-align: center;
    margin: 40px auto; 
  }

  .future_container .data-title span{
    display: inline-block;
    margin-left: 1%;
    font-size: 1.1em;	/*文字サイズを1.4倍*/
    border-radius: 0;
    background-color: #3e3e3e;
    color: #fff;
    box-sizing: border-box;
    padding: 8px 20px 8px 20px;
    margin-bottom: 12px;
    font-feature-settings: 'palt' 1;
    letter-spacing: 0.09em;
    }

    .future_container .data-title h3{
      display: inline-block;
      font-size: 1.1em;
      color: #212529;
      margin: 6% auto;
      letter-spacing: 0.09em;
      }

    .future_container .washable_01 {
      text-align: center;
      }

    .future_container .washable_01 h4{
      display: inline-block;
      margin: 20px auto 5px;
      color: #212529;
      font-size: 2.6em;
      font-weight: normal; /* より細いフォント */
      letter-spacing: 0.06em;
    }

    .future_container .washable_01 span{
      position: relative;
      top: -20px; /* ※を少し上に移動 */
      font-weight: normal; /* より細いフォント */
    }
    
    .future_container .washable_01 .washable_text h4 {
      position: relative;
      text-align: left;
      top: -80px;
      padding-left: 30%;
      color: #212529;
      font-size: 1.6rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      line-height: 1.956;
      margin-bottom: 0; /* 下の余白をなくす */
    }
    
    .future_container .washable_01 .washable_text p {
      margin-top: 0; /* 上の余白をなくす */
      padding: 0 10% 10%;
      text-align: left;
      font-size: 1.1rem;
      font-weight: 300;
      letter-spacing: 0.02em;
      line-height: 1.956
  }
  /*ダイニングソファにありがちな、様々なお悩み（PC）ここまで*/


  .list-half-parts .list-parts p {
    color: #3e3e3e;
    width: 79%;
    margin: 20px auto 80px;
    font-size: 0.9em;
    line-height: 2.025;
    text-align: justify; /* 両端揃え */
    letter-spacing: 0.02em;
    font-weight: normal; /* より細いフォント */
    }
  
    .list-half-parts .list-parts .text-parts span {
    display: inline-block;
    margin-left: 8%;
    font-size: 1.8em;
    font-weight: 300;
    border-radius: 0;
    background-image: -webkit-gradient(linear, left top, right top, from(#BACBD9), to(#77BDD9));
    background-image: -webkit-linear-gradient(left, #BACBD9 0%, #77BDD9 100%);
    background-image: linear-gradient(90deg, #BACBD9 0%, #77BDD9 100%);
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
    color: #fff;
    box-sizing: border-box;
    padding: 5px 20px;
    margin-bottom: 8px;
    font-feature-settings: 'palt' 1;
    letter-spacing: 0.075em;
    z-index: -1;
    }
  }

  @media screen and (max-width: 768px) {
    .pc {
      display: none !important
    }
    .flex_box {
      position: relative;
      margin: 0;
      transition: all .4s
    }
    @-webkit-keyframes bgroop {
      from {
        background-position: 0 0
      }
      to {
        background-position: -1956px 0
      }
    }
    @keyframes bgroop {
      from {
        background-position: 0 0
      }
      to {
        background-position: -1956px 0
      }
    }

	#slider-container img{
		position: absolute;
		right: 0px;
		top: 76%;
		width: 150px;
		z-index: 1
	}

    #mv_area {
      position: relative;
      width: 100%;
      background-image: url(../images/carlo_petimo/sp/bg_mv.jpg);
      background-size: cover;
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-position: center center;
      z-index: 0
    }
    #mv_area .roop {
      position: fixed;
      top: 356px;
      width: 100%;
      height: 251px;
      background: url(../images/carlo_petimo/sp/bg_mv_wave.png) repeat-x;
      background-size: 420px 120px;
      background-position: 0 0;
      -webkit-animation: bgroop 60s linear infinite;
      animation: bgroop 60s linear infinite;
      z-index: -1
    }
    #mv_area .mv01 {
      position: -webkit-sticky;
      position: sticky;
      top: 173px;
      width: 100%;
      height: calc(100vh - 168px);
      height: calc(100dvh - 168px);
      margin: 0 auto;
      overflow: hidden;
      z-index: 1
    }
    #mv_area .mv01 .image {
      position: absolute;
      width: 375px;
      left: 50%;
      top: 0;
      opacity: 0;
      transform: translateX(-50%);
      z-index: -1
    }
    #mv_area .mv01 .image img {
      width: 100%;
      max-width: 375px;
      height: 100%
    }
    #mv_area .mv01 .image:nth-of-type(3) {
      -webkit-animation: change-img-anim 10s infinite;
      animation: change-img-anim 10s infinite;
      -webkit-animation-delay: 0s;
      animation-delay: 0s
    }
    #mv_area .mv01 .image:nth-of-type(4) {
      -webkit-animation: change-img-anim 10s infinite;
      animation: change-img-anim 10s infinite;
      -webkit-animation-delay: 5s;
      animation-delay: 5s
    }
    @-webkit-keyframes change-img-anim {
      0% {
        opacity: 0
      }
      10% {
        opacity: 1
      }
      50% {
        opacity: 1
      }
      60% {
        opacity: 0
      }
      100% {
        opacity: 0
      }
    }
    @keyframes change-img-anim {
      0% {
        opacity: 0
      }
      10% {
        opacity: 1
      }
      50% {
        opacity: 1
      }
      60% {
        opacity: 0
      }
      100% {
        opacity: 0
      }
    }
    #mv_area .mv01 h1 {
      width: 100%;
      max-width: 375px;
      height: calc(100vh - 168px);
      height: calc(100dvh - 168px);
      max-height: 554px;
      margin: 0 auto;
      background: url(../images/carlo_petimo/sp/ttl_mv.png) no-repeat center -100px;
      background-size: 375px 554px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden
    }
    #mv_area .mv01 h1 span {
      display: none
    }
    @-webkit-keyframes fuwafuwa {
      0%, 100% {
        transform: translateY(0)
      }
      50% {
        transform: translateY(-20px)
      }
    }
    @keyframes fuwafuwa {
      0%, 100% {
        transform: translateY(0)
      }
      50% {
        transform: translateY(-20px)
      }
    }
    #mv_area .mv01 #scroll_btn {
      display: none;
      position: absolute;
      top: calc(100dvh - 280px);
      right: 18px;
      width: 28px;
      height: 100px
    }
    #mv_area .mv01 #scroll_btn a {
      display: block;
      width: 28px;
      height: 100px;
      background: url(../images/carlo_petimo/txt_scroll.png) no-repeat center top;
      background-size: 28px 100px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      -webkit-animation: 3s fuwafuwa infinite;
      animation: 3s fuwafuwa infinite
    }
    #mv_area .mv01 #scroll_btn a span {
      display: none
    }
    #mv_area .mv02 {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 100%;
      background-image: url(../images/carlo_petimo/sp/bg_mv_02.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      overflow: hidden;
      z-index: 1
    }
    #mv_area .mv02 .inner {
      box-sizing: border-box;
      width: 100%;
      max-width: 375px;
      height: 705px;
      margin: 0 auto;
      padding: 40px 0 0;
      background: url(../images/carlo_petimo/sp/img_mv_02.png) no-repeat center top;
      background-size: 375px 705px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden
    }
    #mv_area .mv02 p {
      color: #3e3e3e;
      font-size: 2.4em;
      line-height: 2.125;
      text-align: center
    }
    #mv_area .mv02 span {
      display: inline-block;
      background-color: #fff;
      color: #3e3e3e;
      box-sizing: border-box;
      padding: 5px 20px;
      margin-bottom: 10px;
      font-feature-settings: 'palt' 1;
      letter-spacing: 0.09em;
    }
    
    #mv_area .mv03 {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
      width: 100%;
      background-image: url(../images/carlo_petimo/sp/bg_mv_03.jpg);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      overflow: hidden;
      z-index: 1
    }
    #mv_area .mv03 .inner {
      box-sizing: border-box;
      width: 100%;
      height: 726px;
      margin: 0 auto;
      padding: 150px 0 0;
      background: url(../images/carlo_petimo/sp/bg_mv_03.png) no-repeat center;
      background-size: 750px 121px;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden
    }
    #mv_area .mv03 p {
      color: #fff;
      font-size: 15px;
      line-height: 2.2666666667;
      text-align: center
    }

    #mv_area .mv03 p.attention {
      margin-bottom: 200px;
      font-size: 24px;
      line-height: 1.7497801231
    }

  /*ダイニングソファにありがちな、様々なお悩み（sp）*/
  .future_container {
    background-color: #f0f0f0;
    margin: 10% auto; 
  }

  .future_container .data-title {
    background-color: #b5b5b5;
    text-align: center;
    margin: 40px auto; 
  }

  .future_container .data-title span{
    display: inline-block;
    margin-left: 1%;
    font-size: 2.6em;
    font-weight: 300;
    border-radius: 0;
    background-color: #3e3e3e;
    color: #fff;
    box-sizing: border-box;
    padding: 8px 20px 8px 20px;
    margin-bottom: 12px;
    font-feature-settings: 'palt' 1;
    letter-spacing: 0.09em;
    }

    .future_container .data-title h3{
      display: inline-block;
      font-size: 2.6em;
      color: #212529;
      margin: 10% auto;
      letter-spacing: 0.09em;
      }

    .future_container .washable_01 {
      text-align: center;
      }

    .future_container .washable_01 h4{
      display: inline-block;
      margin: 20px auto 5px;
      color: #212529;
      font-size: 4.6em;
      font-weight: normal;
      letter-spacing: 0.06em;
    }

    .future_container .washable_01 span{
      position: relative;
      top: -20px; /* ※を少し上に移動 */
      font-weight: normal; /* より細いフォント */
    }
    
    .future_container .washable_01 .washable_text h4 {
      position: relative;
      text-align: left;
      top: -50px;
      padding-left: 25%;
      color: #212529;
      font-size: 2.1em;
      font-weight: 600;
      letter-spacing: 0.003em;
      line-height: 1.956;
      margin-bottom: 0; /* 下の余白をなくす */
    }
    
    .future_container .washable_01 .washable_text p {
      margin-top: 0; /* 上の余白をなくす */
      padding: 0 10% 10%;
      text-align: left;
      font-size: 2.2em;
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.956
  }
  /*ダイニングソファにありがちな、様々なお悩み（sp）ここまで*/


.list-half-parts .list-parts p {
  color: #3e3e3e;
  width: 79%;
  margin: 20px auto 80px;
  font-size: 2.2em;
  line-height: 2.025;
  text-align: justify; /* 両端揃え */
  letter-spacing: 0.02em;
  font-weight: normal; /* より細いフォント */
  }

  .list-half-parts .list-parts .text-parts span {
  display: inline-block;
  font-size: 3.6em;
  color: #fff;
  border-radius: 0;
  background-image: -webkit-gradient(linear, left top, right top, from(#BACBD9), to(#77BDD9));
  background-image: -webkit-linear-gradient(left, #BACBD9 0%, #77BDD9 100%);
  background-image: linear-gradient(90deg, #BACBD9 0%, #77BDD9 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-sizing: border-box;
  padding: 7px 21px;
  margin-left: 8%;
  margin-bottom: 14px;
  font-feature-settings: 'palt' 1;
  letter-spacing: 0.09em;
  z-index: -1;
  }

}

/*2カラムブロック（※900px未満では１カラム）
---------------------------------------------------------------------------*/
/*２カラムを囲むブロック*/
.list-half-parts .list-parts {
	display: flex;			/*flexボックスを使う指定*/
	flex-direction: column;	/*子要素を縦並びにする*/
	padding-top: 0;
  max-width: 1260px;
	margin: 8% auto;
}

/*ブロック内のh4見出し*/
.list-half-parts .list-parts h4 {
	font-size: 1.4em;	/*文字サイズを1.4倍*/
	margin-left: 10%;
	letter-spacing: 0.1em;
	font-weight: normal; /* より細いフォント */
}

  .image-l-parts_circle {
    width: 95%;
    height: 95%;
    overflow: hidden;
    position: relative;
    margin-left: 3%;
}

.circle-container {
    width: 100%; /* 必要に応じてサイズ調整 */
    height: 0;
    padding-top: 100%; /* 正方形のコンテナを作るため */
    overflow: hidden; /* はみ出した部分を隠す */
    border-radius: 50%; /* 円形にする */
    position: relative; /* 子要素の絶対配置に必要 */
}

.circle-image {
    position: absolute; /* 親要素の中で位置を調整 */
    top: 50%;
    left: 50%;
    width: 100%; /* 幅を100%に */
    height: auto; /* 高さは自動 */
    min-width: 100%; /* 幅が100%未満になるのを防ぐ */
    min-height: 100%; /* 高さが100%未満になるのを防ぐ */
    transform: translate(-50%, -50%); /* 中心を調整 */
    z-index: 1; 
}




/*画像ブロック共通*/

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		/*２カラムを囲むブロック*/
		.list-half-parts .list-parts {
			display: flex;                /* 子要素を横並びにするための指定 */
			flex-direction: row;			/*子要素を横並びにする*/
			justify-content: space-between;	/*並びかたの種類の指定*/
			align-items: center;			/*垂直揃えの指定。天地中央に配置されるように。*/
			margin-top: 10%;
		}
		
		/*画像ブロック共通*/
		.list-half-parts .image-l-parts, .image-l-parts_circle {
			width: 50%;			/*画像の幅*/
		}

		/*画像を左に配置する場合*/
		.list-half-parts .image-l-parts, .image-l-parts_circle {
			order: -1;
			margin-right: 2rem;	/*画像の右側に空けるスペース*/
		}

		/*テキストブロック*/
		.list-half-parts .text-parts {
			flex: 1;
			padding-right: 2rem;   /* 右側に余白を追加してレイアウト調整 */			
		}
  }

  


	/*button*/
	.btn,
	a.btn,
	button.btn {
	  font-size: 1.6rem;
	  font-weight: 700;
	  line-height: 1.5;
	  position: relative;
	  display: inline-block;
	  padding: 1rem 4rem;
	  cursor: pointer;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	  -webkit-transition: all 0.3s;
	  transition: all 0.3s;
	  text-align: center;
	  vertical-align: middle;
	  text-decoration: none;
	  letter-spacing: 0.1em;
	  color: #212529;
	  border-radius: 0.5rem;
	}
	
	a.btn-flat {
	  overflow: hidden;
	
	  padding: 1.5rem 6rem;
	
	  color: #000;
	  border-radius: 0;
	  background: #fff;
	}
	
	a.btn-flat btn_span {
	  position: relative;
	}
	
	a.btn-flat:before {
	  position: absolute;
	  top: 0;
	  left: 0;
	
	  width: 150%;
	  height: 500%;
	
	  content: "";
	  -webkit-transition: all 0.5s ease-in-out;
	  transition: all 0.5s ease-in-out;
	  -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
	  transform: translateX(-98%) translateY(-25%) rotate(45deg);
	
	  background: #77BDD9;
	}
	
	a.btn-flat:hover:before {
	  -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
	  transform: translateX(-9%) translateY(-25%) rotate(45deg);
	}
/*buttonここまで*/


/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
.pagetop-show {display: block;}

/*ボタンの設定*/
.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;		/*右からの配置場所指定*/
	bottom: 20px;		/*下からの配置場所指定*/
	color: #fff;		/*文字色*/
	font-size: 1.5rem;	/*文字サイズ*/
	background: rgba(0,0,0,0.2);	/*背景色。0,0,0は黒の事で0.2は色が20%出た状態。*/
	width: 60px;		/*幅*/
	line-height: 60px;	/*高さ*/
	border-radius: 50%;	/*円形にする*/
}


/*その他
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 0.75em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/

  .thumbnail {
    width: 100%; /* 幅を100%に */
    height: auto; /* 高さを自動調整 */
    aspect-ratio: 1; /* 正方形を維持 */
    object-fit: cover; /* 画像を正方形の領域にフィットさせる */
}

/* 親コンテナ設定 */
.video-container {
  display: flex;                  /* フレックスボックスを使用 */
  flex-direction: column;         /* 縦に並べる */
  justify-content: space-between; /* 動画間の余白 */
  gap: 40px;                      /* 動画間の余白 */
  padding: 20px;                  /* 親コンテナの余白 */
  max-width: 1280px;               /* 最大幅の設定 */
  margin: 0 auto;                 /* 中央に配置 */
}

/* 各動画のスタイル */
.video-item {
  height: 650px;                  /* 高さを300pxに設定 */
  background-color: black;
  border-radius: 8px;
  overflow: hidden;               /* iframeのはみ出し防止 */
}

.video-item iframe {
  width: 100%;                    /* 親要素の幅に合わせる */
  height: 100%;                   /* 親要素の高さに合わせる */
  border: none;                   /* 枠線を非表示 */
}

/* スマートフォンやタブレットなどで調整 */
@media screen and (max-width: 768px) {
  .video-container {
      max-width: 100%;            /* 画面幅100%に調整 */
  }
}