@media only screen and (min-width:600px) {

.event-title {
    font-size: 180%;
    color: #202321;
    font-weight: normal;
    padding: 22px 10px;
    margin: 0 0 60px;
    line-height: 1;
    border-bottom: #CCC 1px solid;
}

html {
    scroll-behavior: smooth;
  }

a {
    text-decoration: none;
}

.wrap-main-content {
    margin-top: 2%;
    padding: 0 0 10%;
    background: #e4e4e5;
    /*background: linear-gradient(to right, #f2f2f2, #dedddb 67%);*/
}

.str-outer:not(.of-full), .mod-tab .tab-panel {
    padding-right: 0;
    padding-left: 0;
}

.site-main {
    padding: 0;
}

.main-page h1 {
    margin: 0;
    border: none;
}

.main-page h2 {
    margin-bottom: 30px;
    color: #b62a27;
    text-align: center;
    font-size: 250%;
    font-weight: 900;
}

.main-page h3 {
    margin-bottom: 20px;
    border: none;
    text-align: center;
}

/* animation */
@-webkit-keyframes passing-bar{
	0% {
		left: 0;
		right: auto;
		width: 0;
	}
	50% {
		left: 0;
		right: auto;
		width: 100%;
	}
	51% {
		left: auto;
		right: 0;
		width: 100%;
	}
	100% {
		left: auto;
		right: 0;
		width: 0;
	}
}
@keyframes passing-bar{
	0% {
		left: 0;
		width: 0;
	}
	50% {
		left: 0;
		width: 100%;
	}
	51% {
		left: 0;
		width: 100%;
	}
	100% {
		left: 100%;
		width: 0;
	}
}
@-webkit-keyframes passing-txt{
	0% { opacity: 0; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes passing-txt{
	0% { opacity:0; }
	50% { opacity:0; }
	100% { opacity:1; }
}
/* css */
.passing .passing-box {
	display: block;
	text-align: center;
}
.passing .passing-bar {
	position: relative;
	/*display: inline-block;*/
	/*　後ほど解説　*/
	-webkit-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
.passing .passing-bar:before {
	content: '';
	display: inline-block;
	width: 0;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
    background: #e4e4e5;
}
.passing .passing-txt {
    opacity: 0;
    -webkit-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    font-size: 180%;
    font-weight: bold;
    padding: 2% 5%;
    color: #fff;
    background: #333;
}
.passing.move .passing-bar:before {
	-webkit-animation: passing-bar 1s ease 0s 1 normal forwards;
	animation: passing-bar 1s ease 0s 1 normal forwards;
}
.passing.move .passing-txt {
	-webkit-animation: passing-txt 0s ease .5s 1 normal forwards;
	animation:passing-txt 0s ease .5s 1 normal forwards;
}

/* INDEX */

.brand-index {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

.brand-index li {
    width: 32%;
}

/* コンテンツ */

.wrap-content {
    margin: 100px 0;
}

/* brand */

.wrap-brand {
    margin: 100px 30px;
    padding: 30px;
    background-color: #fff;
    border: 1px solid #525152;
}

.brand-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.wrap-img {
    width: 330px;
}

.wrap-spec {
    width: 360px;
}

.spec {
    line-height: 1.8;
}

.main-page .price {
    text-align: center;
    font-size: 300%;
    font-weight: 600;
}

/* 注意事項 */

.wrap-attention {
    margin: 0 50px;
}

/* ボタン */

.right-arrow  {
    display: block;
    position: relative;
    margin: 30px;
    padding: 15px;
    text-align: center;
    font-size: 160%;
    color: #fff;
    background-color: #b62a27;
    border: 1px solid #525152;
}

.right-arrow::after {
    display: block;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 50%;
    right: 30px;
    content: '';
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: translateY(-50%) rotate(45deg);
}

/* マーカー */

.js-marker {
    display: inline;
    position: relative;
    background-image: linear-gradient(90deg, #ffff66, #ffff66); /* 単色の場合は同じ色、グラデーションさせる場合は別々の色 */
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 0 100%; /* '30%'の部分にマーカーの太さを記入 */
    transition: all 1s ease-in-out; /* マーカーを引く速度を調整 */
    font-weight: bold; /* ついでに太字にしたい場合 */
  }
  
  /* アニメーション発火時 */
  .js-marker.inview {
    background-size: 100%; /* '30%'の部分は上で設定した太さに合わせる */
  }

/* 共通 */

.contents_inner {
    padding-top: 70px;
    margin-top: -70px;
}

.note {
    font-size: 78%;
}
}