@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/* =========================================================
//  WEB FONT
// ========================================================= */
.p-mainVisual__slideText {
	font-size: 3rem;
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.font_WDXL-Lubrifont {
  font-family: "WDXL Lubrifont JP N", sans-serif;
  font-weight: 400;
  font-style: normal;
}

/* =========================================================
//  ヘッダー
// ========================================================= */
/* SPヘッダーメニュー非表示 */
button.c-iconBtn.-menuBtn.c-plainBtn {
    display: none;
}

/* =========================================================
//  写真の角を丸く
// ========================================================= */
/* 右側 */
.radius-img-r img {
    border-radius: 0 20px 20px 0;
    overflow: hidden;
}
/* 左側 */
.radius-img-l img {
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}
/* 全て */
.radius-img img {
    border-radius: 20px;
    overflow: hidden;
}
/* 右側 10px */
.radius-img-r-10 img {
    border-radius: 0 10px 10px 0;
    overflow: hidden;
}
/* 左側 10px */
.radius-img-l-10 img {
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}
/* 全て 10px */
.radius-img-10 img {
    border-radius: 10px;
    overflow: hidden;
}
/* =========================================================
//  要素（写真以外）の角を丸く
// ========================================================= */
.radius-cover {
    border-radius: 30px;
    overflow: hidden;
}

/* 写真以外 右側 */
.radius-r {
    border-radius: 0 20px 20px 0;
    overflow: hidden;
}

/* 写真以外 左側 */
.radius-l {
    border-radius: 20px 0 0 20px;
    overflow: hidden;
}

/* 写真以外 全て */
.radius-all {
    border-radius: 20px;
    overflow: hidden;
}

/* 写真以外 右側 10px */
.radius-r-10 {
    border-radius: 0 10px 10px 0;
    overflow: hidden;
}

/* 写真以外 左側 10px */
.radius-l-10 {
    border-radius: 10px 0 0 10px;
    overflow: hidden;
}

/* 写真以外 全て 10px */
.radius-all-10 {
    border-radius: 10px;
    overflow: hidden;
}
/* =========================================================
//  MV装飾
// ========================================================= */
/* 余白 */
div#main_visual {
    background-color: #4a9dd7;
}
.p-mainVisual.-margin-on {
    padding: 50px;
}
.p-mainVisual__slide {
    border-radius: 3vh;
}
.swiper-pagination {
    display: none;
}
/* 各コピーのフォントサイズ */
h2.mv-copy {
  font-size: 6vw
}
.p-mainVisual__slideText {
  font-size: 10vw;
}
@media screen and (min-width: 600px) {
  h2.mv-copy {
    font-size: 4vw
  }
  .p-mainVisual__slideText {
    font-size: 8vw;
  }
}
@media screen and (min-width: 1200px) {
  h2.mv-copy {
    font-size: 2vw
  }
  .p-mainVisual__slideText {
    font-size: 4vw;
  }
}
/* 回転ロゴ */
.hero-group {
	position: absolute;
	width: 70%;
  z-index: 1;
  left: 15vw;
  margin-bottom: 0;
  top: -70vw;
  opacity: 90%;
}
@media screen and (min-width: 600px) {
  .hero-group {
    top: -65vw;
    left: -20vw;
  }
}
@media screen and (min-width: 1200px) {
  .hero-group {
    top: -70vh;
    left: -20vw;
  }
}
.hero-group * {
  margin-bottom: 0;
}
.rotate {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
}
.rotate .rotate-ctn{
	position: absolute;
	width: 100%;
	height: 100%;
	animation: 50s linear big-circle infinite;	/* 大枠を回転させているアニメーション */
  z-index: 3;
}
.wheel{
	animation: 50s linear big-circle infinite;	/* 大枠を回転させているアニメーション */
}
.rotate .box {
	position: absolute;
	width: 100px;
	height: 50%;
	transform-origin: 50% 100%;
}
.rotate-bg {
    z-index: 2;
    position: relative;
    left: -3%;
    top: -3px;
}
/* 各コンテンツの文字を上向きにする */
.rotate .box.taiyo { 
  left: calc(50% - 5vw);
  transform: translate(-50%, 0) rotate(-110deg);
}
.rotate .box.tuki {
  left: calc(50% + 5vw);
  transform: translate(-50%, 0) rotate(70deg);
}
.rotate .box .parts {
	rotate: 110deg;
	position: relative;
	width: 80%;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
}
/* 各コンテンツを回転させるアニメーション */
.rotate .box.taiyo .parts {
  animation: 50.0s linear taiyo infinite;
  width: 10vw;
}
.rotate .box.tuki .parts {
  animation: 50.0s linear tuki infinite;
  width: 10vw;
}

/* keyframes */
@keyframes big-circle {
 0% { transform: rotate(0deg);}
 100% { transform:rotate(360deg);}
}
@keyframes taiyo {
 0% { transform: rotate(360deg);}
 100% { transform: rotate(0deg);}
}
@keyframes tuki {
 0% { transform: rotate(180deg);}
 100% { transform: rotate(-180deg);}
}