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


/* オープンアニメーション
------------------------------------------------- */

.mainichi_opening {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f4d5;
  z-index: 99999;
  animation: odometer_count 1s forwards;
  animation-delay: 4s;
transition-timing-function : ease;
    height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}

@keyframes odometer_count {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    display: none;
    z-index: -1;
  }
}
.mainichi_opening .since{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" !important;
	font-size: 30px;
	display: flex;
	align-items: center;
}
.odometer{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif" !important;
	font-size: 70px;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin-left: 20px;
}
.mainichi_opening dl{
	max-width: 500px;
	width: 80%;
}
.mainichi_opening dl dd{
	width: 60%;
	margin: auto;
}

/* レイアウト
------------------------------------------------- */
a:hover img {
  opacity: 0.7 !important;
}
body {
  margin: 0
}
.mainichi_wrap {
  font-size: 1.125rem;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  color: #000;
  line-height: 2;
  margin: 0;
  background-image: url("../../images/mainichikoh/bg.gif");
  background-repeat: repeat;
  overflow: hidden;
}
/* main
------------------------------------------------- */
.mainichi_main {
  margin: 0 auto 100px;
  position: relative;
  padding: 70px 0;
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  clear: both;
  background-color: #ffda00;
  background-image: linear-gradient(0deg, #fff2bb, #ffda00);
}
.mainichi_main h1 {
  margin-bottom: 50px;
}
.mainichi_main h2 {
  margin-top: 30px;
}
.mainichi_main ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 5%;
}
.cloud_red {
  position: absolute;
  top: 0;
  left: -50px;
  width: 500px;
}
.cloud_blue {
  position: absolute;
  bottom: -100px;
  right: -30px;
  margin: 0;
  width: 400px;
}
.cloud_red img,
.cloud_blue img{
  width: 100%;
  height: auto;
}
/* メニュー
------------------------------------------------- */
ul.mainichi_menu {
  display: flex;
  justify-content: space-between;
  max-width: 1000px;
  margin: 0 auto 100px;
  list-style: none;
  padding: 0 5%;
}
ul.mainichi_menu li {
  width: 22%;
  text-align: center;
}
ul.mainichi_menu li a {
  display: block;
  padding: 20px 30px;
  background-color: #ffda00;
  border-radius: 100px;
  font-size: 1.625rem;
  text-decoration: none;
  color: #000;
  font-weight: 700;
  border: solid 7px #FFF;
}
/* リニューアルの背景
------------------------------------------------- */
section.mainichi_renewal {
  max-width: 1920px;
  margin: 0 auto 400px;
  position: relative;
}
.mainichi_renewal_in {
  padding: 6% 10%;
  background-color: #ffda00;
  border-radius: 100px 0 0 100px;
  margin-left: 15%;
}
.mainichi_renewal_in article {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.mainichi_renewal_in article p + p {
  margin: 40px 0;
}
h1.mainichi_h1 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
  align-items: center;
  margin-bottom: 60px;
}
h1.mainichi_h1 strong {
  color: #d7001d;
  font-size: 110px;
  margin-right: 30px;
  display: inline-block;
  line-height: 1;
}
.mainichi_marker {
  background: linear-gradient(transparent 70%, #fff 70%);
}
h2.mainichi_vertical {
  writing-mode: vertical-rl;
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.8;
  margin-left: 7%;
}
h2.mainichi_vertical span {
  background-color: #FFF;
  padding: 10px 0;
}
.mainichi_cloud1 {
  position: absolute;
  bottom: -100px;
  left: 3%;
}
.mainichi_imagephoto {
  position: absolute;
  bottom: -400px;
  right: 3%;
}
.mainichi_imagephoto img {
  border-radius: 60% 70% 50% 80%/60% 70% 70% 80%;
}
/* ラインナップ
------------------------------------------------- */
section.mainichi_lineup{
  max-width: 1920px;
  margin: 0 auto 100px;
  position: relative;
  display: flex;
}
h1.mainichi_vtl_green{
    writing-mode: vertical-rl;
	color: #7dc8b5;
	font-size: 120px;
	font-weight: 700;
}


.mainichi_renew_ttl{
	font-size: 1.625rem;
	line-height: 1.5;
	margin-bottom: 10px;
}
.mainichi_renew_ttl strong{
	background-color: #d7001d;
	color: #FFF;
	border-radius: 100px;
	padding: 2px 20px;
	margin-bottom: 5px;
	display: inline-block;
}
.mainichi_renew_ttl.new strong{
	background-color: #006ba5;
}

ul.mainichi_products {
  list-style: none;
  display: flex;
   text-align: center;
   width: calc(100% - 15%);
   gap: 7%;
   margin-right: 5%;
}
ul.mainichi_products li .border{
  padding: 80px 80px 40px 80px;
  background-color: #ffda00;
   background-image: linear-gradient(0deg, #fff2bb, #ffda00);
  border-radius: 500px;
  border: solid 10px #d7001d;
  outline: 10px solid rgb(255, 255, 255);
  outline-offset: -20px;
}
ul.mainichi_products li img{
  max-width: 100%;
  height: auto;
}

ul.mainichi_products li:last-child{
  margin-top: 150px;
}


ul.mainichi_products li:last-child .border{
  border: solid 10px #006ba5;
background-image: linear-gradient(0deg, #3fcad8 0%, #fff 25%, #fff 30%, #ffda00 85%);
}
ul.mainichi_products h2 {
  margin-top: 30px;
}

.mainichi_btn a{
	width: 110px;
	height: 110px;
	background-color: #d7001d;
	color: #FFF;
	text-decoration: none;
	border-radius: 100%;
	border: solid 7px #FFF;
	margin: 15px auto 0;
	font-size: 30px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.7s;
}
.mainichi_btn a:hover{
	transform: rotateY(360deg);
}
.mainichi_btn a:after{
	content: "";
	width: 4px;
	height: 20px;
	position: absolute;
	bottom: 13px;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #ffda00;
	border-radius: 4px;
}

.mainichi_btn.new a{
	background-color: #006ba5;
}

.mainichi_cloud2 {
  position: absolute;
  top: 300px;
  right: 0;
}
/* movie
------------------------------------------------- */
section.mainichi_movie {
  max-width: 980px;
  margin: 0 auto 350px;
  padding: 0 4%;
   position: relative;
  z-index: 10;
}
dl.mainichi_movie{
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 100px;
}
dl.mainichi_movie:after{
  content: none;
}
dl.mainichi_movie dt{
  width: 600px;
  border: solid 7px #7dc8b5;
  background-color: #FFF;
  border-radius: 30px;
  aspect-ratio: 16 / 9;
}

dl.mainichi_movie dt iframe {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  vertical-align: bottom;
}


dl.mainichi_movie dd{
  width: calc(100% - 660px);
}
.mainichi_cloud_movie1{
	position: absolute;
	left: -150px;
	bottom: 0;
	z-index: -1;
}
.mainichi_cloud_movie2{
	position: absolute;
	left: 400px;
	bottom: -30px;
	z-index: -2;
}
/* こだわり
------------------------------------------------- */
section.mainichi_belief {
  max-width: 1920px;
  margin: 0 auto 400px;
  position: relative;
}
.mainichi_belief_in {
  padding: 6% 10% 6% 3%;
  background-color: #ffda00;
  border-radius: 0 100px 100px 0;
  margin-right: 15%;
  display: flex;
}

h1.mainichi_vtl_h1 {
  writing-mode: vertical-rl;
  font-size: 1.875rem;
  font-weight: 700;
  margin-right: 50px;
}
h1.mainichi_vtl_h1 strong {
  color: #d7001d;
  font-size: 90px;
  margin-bottom: 30px;
  display: inline-block;
}

ol.mainichi_number{
	list-style: none;
}


ol.mainichi_number li{
  padding-left: 120px;
  margin-bottom: 100px;
    position: relative;
}
ol.mainichi_number li:nth-child(2){
  margin-left: 120px;
}
ol.mainichi_number li:before{
  content:"01";
  font-size: 100px;
  color: #FFF;
  position: absolute;
  left: 0;
  top: -10px;
  line-height: 1;
}
ol.mainichi_number li:nth-child(2):before{
  content:"02";
}
ol.mainichi_number li:nth-child(3):before{
  content:"03";
}
ol.mainichi_number li dt{
  font-size: 50px;
  line-height: 1.4;
  margin-bottom: 10px;
}
ol.mainichi_number li dd{
  position: relative;
}

.mainichi_green_border{
	padding: 5%;
	background-color: #FFF;
  border: solid 7px #7dc8b5;
  border-radius: 50px;
  text-align: center;
  position: absolute;
  top: 50px;
  left: -120px;
}

.mainichi_green_border img{
	max-width: 100%;
	height: auto;
}

.mainichi_byakudan{
  position: absolute;
    top: -520px;
    right: -400px;
}
.mainichi_byakudan img {
  border-radius: 60% 70% 50% 80%/60% 70% 70% 80%;
}

.mainichi_cloud3 {
  position: absolute;
  bottom: -100px;
  right: 0;
}

/* ヒストリー
------------------------------------------------- */
section.mainichi_history {
  max-width: 1920px;
  margin: 0 auto 200px;
  position: relative;
  display: flex;
  align-items: flex-start;
}

.splide{
	width: calc(100% - 15%);
	margin-top: 150px;
}
.my-carousel-progress {
  background: #ccc;
  border-radius: 5px;
  width: 50%;
  margin: 0 20px 0 auto;
}

.my-carousel-progress-bar {
  background: #d7001d;
  height: 5px;
  transition: width 400ms ease;
  width: 0;
   border-radius: 5px;
}
ul.splide__list{
	margin-bottom: 30px;
		line-height: 1.6;
}
ul.splide__list li{
	background-color: #FFF;
	padding: 20px 30px;
	border-radius: 30px;
    border: solid 7px #ffda00;
}
ul.splide__list li .history_pakage{
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 10px;
}

ul.splide__list li .history_pakage li{
	padding: 0;
	border-radius: 0;
    border: none;
	text-align: center;
	display: flex;
	flex-direction: column;
}
ul.splide__list li .history_pakage li img{
	display: block;
	margin: auto;
	margin-top: auto;
}
ul.splide__list li dl{
}
ul.splide__list li dl dt{
	color: #d7001d;
	font-size: 30px;
	font-style:italic;
line-height: 1.2;
margin-bottom: 10px;
}
ul.splide__list li dl dd{
	font-weight: 500;
	text-align: center;
}
ul.splide__list li dl .package{
	text-align: center;
}
ul.splide__list li dl .package img{
	display: block;
	margin: auto;
	margin-top: auto;
}
.mainichi_year{
	display: flex;
	align-items: flex-start;
}
.mainichi_year span{
	font-weight: 700;
	background-color: #006ba5;
	border-radius: 100px;
	color: #FFF;
	padding: 0px 10px;
}
.maxw300{
	max-width: 300px;
	text-align: left;
}


/* その他のシリーズ
------------------------------------------------- */
section.mainichi_series {
  max-width: 1920px;
  margin: 0 auto 100px;
  position: relative;
  padding: 0 5%;

}

h1.mainichi_green{
	color: #7dc8b5;
	font-size: 120px;
	font-weight: 700;
  text-align: center;
  margin-bottom: 60px;
}

ul.mainichi_other_item{
	max-width: 1280px;
	margin: 0 auto 200px;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 3%;
}
ul.mainichi_other_item li{
	text-align: center;
	padding: 40px 10px 20px;
	border: solid 10px #7dc8b5;
	background-color: #FFF;
	border-radius: 500px;
	width: 22%;
	box-sizing: border-box;
	line-height: 1.4;
	color: #666;
	font-size: 1rem;
	margin-bottom: 40px;
	display: flex;
	flex-direction: column;
}
ul.mainichi_other_item li:nth-child(2){
	border: solid 10px #006ba5;
}

ul.mainichi_other_item li:nth-child(3){
	border: solid 10px #b1925c;
}
ul.mainichi_other_item li:nth-child(4){
	border: solid 10px #d7001d;
}
ul.mainichi_other_item li:nth-child(6){
	border: solid 10px #006ba5;
}

ul.mainichi_other_item li:nth-child(7){
	border: solid 10px #b1925c;
}
ul.mainichi_other_item li:nth-child(8){
	border: solid 10px #d7001d;
}
ul.mainichi_other_item li img{
	border-radius: 70px;
	width: 100%;
	height: auto;
}
ul.mainichi_other_item li h2{
	font-weight: 700;
	color: #000;
	margin-bottom: 10px;
	font-size: 1.125rem;
}

.mainichi_btn_small{
	margin-top: auto;
}
.mainichi_btn_small a{
	width: 90px;
	height: 90px;
	background-color: #d7001d;
	color: #FFF;
	text-decoration: none;
	border-radius: 100%;
	border: solid 7px #FFF;
	margin: 15px auto 0;
	font-size: 26px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.7s;
}

.mainichi_btn_small a:hover{
	transform: rotateY(360deg);
}
.mainichi_btn_small a:after{
	content: "";
	width: 4px;
	height: 15px;
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	margin: auto;
	background-color: #ffda00;
	border-radius: 4px;
}

.mainichi_cloud4 {
  position: absolute;
  top: -50px;
  left: -50px;
}
.mainichi_cloud5 {
  position: absolute;
  bottom: -150px;
  right: 0px;
}