@charset "utf-8";

body{
    margin: 0;
    padding: 0;
}

.bg{
	background-color: #f8ccd4;
	margin-top: -80px;
}

#ktr_wrap{
    max-width: 800px;
	text-align: center;
    padding: 0 0 0 0;
    margin: 0 auto ;
    display: block;
    font-weight: 400;
    letter-spacing: 1px;
    font-family: "Noto Sans JP", sans-serif;
	background: #ffffff;
	scroll-behavior: smooth;
}

#ktr_wrap a {
    text-decoration: none;
}

#ktr_wrap a:hover{
    text-decoration: none;
}

#ktr_wrap img {
    width: 100%;
    line-height: 0;
}

#ktr_head{
	position: sticky;
    top: 0;
    z-index: 1;
    background: #ffffff;
}

#ktr_head .head{
    position: relative;
    text-align: center;
    margin: 10% auto 0;
	width: 70%;
	padding-top: 5%;
}

#ktr_head .head_logo{
    margin: 0 auto;
	padding: 5% 0 10%;
	width: 55%;
}

.contents_wrap{
	background: #fffcb7;
	padding: 10% 0 20%;
	position: sticky;
    z-index: 2;
}

.contents_wrap::before,
.contents_wrap::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 30px;
	background-image: url("../images/kazari_dot.jpg");
	background-repeat: repeat-y;
	background-size: 100% auto;
	z-index: 1;
}

.contents_wrap::before {
	left: 0;
}

.contents_wrap::after {
	right: 0;
}

.ribbon{
	width: 400px;
	margin: 0 auto;
}

.main_img img{
	border-radius: 30px!important;
}

.contents_wrap .img01{
	width: 65%;
	margin: 10% auto;
}

.contents_wrap .logo_ktr{
	width: 200px;
	margin: 15% auto 3%;
}

.contents_wrap .cross{
	font-size: 40px;
	font-weight: 100;
}

.contents_wrap .logo_swimmer{
	width: 235px;
	margin: 3% auto 10%;
}

.contents_wrap .logo_wrap{
	position: relative;
}

.contents_wrap .icon_01,
.contents_wrap .icon_02{
	position: absolute;
	width: 100px;
	transform-origin: center top;
	animation: yurayura 4s ease-in-out infinite;
}

.contents_wrap .icon_01{
	top: 0;
	right: 15%;
}

.contents_wrap .icon_02{
	bottom: 0;
	left: 15%;
}

.contents_wrap .date_box{
	font-family: "Zen Maru Gothic", sans-serif;
	margin: 6% auto;
	border-top: 2px dashed #d0121c;
	border-bottom: 2px dashed #d0121c;
	width: 50%!important;
	padding: 15px 0;
	font-weight: 500;
}

.contents_wrap .date_box .date{
	font-size: 26px;
	line-height: 1;
	margin-bottom: 10px;
}

.contents_wrap .date_box .date span{
	font-size: 20px;
	line-height: 1;
}

.contents_wrap .date_box .date_small{
	font-size: 14px;
}

.contents_wrap .top_lead{
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 300;
	line-height: 1.6;
}

.line_lace{
	margin: 10% auto;
}
.item_bg{
	background: #fffcb7;
	padding-bottom: 15%;
}

.item01,.item02{
	position: relative;
}
.item01 img,.item02 img{
	position: relative;
}

#item02,#item03,#item04,#item05,#item06{
	position: relative;
}

#item02 .img_box1{
	margin: 0 auto 10% 3.5%;
}

#item04 .img_box1{
	margin: 0 auto 3% 3.5%;
}

.icon_03,.icon_04,.icon_05,.icon_06,.icon_07,.icon_08,.icon_10,.icon_11,.icon_12,.icon_13{
	position: absolute;
	transform-origin: center top;
	animation: yurayura 4s ease-in-out infinite;
	z-index: 100;
}

.icon_03{
	top: -3%;
	left: 57%;
	width: 100px;
}

.icon_04{
    bottom: 0%;
    right: 14%;
    width: 110px;
}

#item03 .img_box1{
	margin: 10% 3.5% 10% auto;
}

.icon_05{
    bottom: -2%;
    left: 30%;
    width: 75px;
}

.icon_06{
	top: -2%;
	left: 58%;
	width: 90px;
}

.icon_07{
	top: -3%;
	left: 15%;
	width: 80px;
}

.icon_08{
	bottom: 0%;
	right: 13%;
	width: 90px;
}

.icon_09{
	width: 90px;
	margin: 10% auto;
}

.icon_10{
	top: -3%;
	right: 15%;
	width: 70px;
}

.icon_11{
	bottom: 0%;
    left: 10%;
    width: 45px;
}

.credit_wrap {
    margin: 5% auto 10%;
    width: 80%;
    padding: 0 5%;
    border-radius: 20px;
    box-sizing: border-box;
}

.credit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 5px 0;
    box-sizing: border-box;
}

.credit:last-child {
    border-bottom: none;
}

.credit .item_name {
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    text-align: left;
}

.credit .item_price {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
	justify-content: flex-end;
}

.credit .item_price span.tax {
    font-size: 10px;
    white-space: nowrap;
}

.credit .item_price a {
    display: inline-flex;
    align-items: center;
}

.credit .item_price span.buy {
    font-size: 12px;
    font-weight: bold;
    background: #d0121c;
    color: #ffffff;
    padding: 5px 16px;
    border-radius: 100vh;
    transition: background-color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.2;
}

.credit .item_price a:hover span.buy {
    background: #a00e14;
    transform: scale(1.05);
}

.list_wrap{
	padding: 10% 0 3%;
	background-image: url("../images/bg.png");
	background-size: 50%;
	background-position: calc(50% - 20px) center;
	position: relative;
	z-index: 3;
}

.list_flex{
	display: flex;
	flex-wrap: wrap;
	column-gap: 5px;
    padding-top: 8%;
    width: 85%;
    margin: 0 auto;
	justify-content: center;
}

.list_flex .list_img{
	width: 32%;
}

.list_flex .list_img img{
	border-radius: 20px
}

.info_wrap{
	width: 65%;
    margin: 10% auto 10%;
    background: #ffffff;
    padding: 5%;
    border-radius: 30px;
	position: relative;
}

.info_wrap .title_info{
	width: 300px;
	margin: 0 auto 5%;
}

.info_wrap .info_txt{
	font-family: "Zen Maru Gothic", sans-serif;
    width: 90%;
    margin: 5% auto 0;
}

.icon_12{
	top: 8%;
    left: 6%;
    width: 60px;
}

.icon_13{
	top: 8%;
    right: 6%;
    width: 60px;
}


.last_img{
	width: 55%;
	margin: 10% auto;
}

.icon_15{
	width: 20%;
	margin: 0 auto 10%;
}

.brand{
	width: 75%;
	margin: 0 auto;
	padding: 5% 0;
	border: 6px dotted #d0111b;
	border-radius: 30px;
	background: #ffffff
}

.logo_swimmer2{
	width: 300px;
	margin: 0 auto 5%;
}

.brand_txt{
	font-size: 13px;
	line-height: 1.8;
}

.credit_wrap{
	margin: 0 auto 10%;
}

.credit{
	display: flex;
	margin: 0 auto;
    width: 85%;
}

.credit .item_name{
	font-size: 14px;
}

.credit .item_price{
	font-size: 14px;
	letter-spacing: .5px;
}

.credit .item_price span.tax{
	font-size: 10px;
}

.credit .item_price span.buy{
	font-size: 13px;
	margin-left: 3%;
	background: #d0121c;
	padding: 3px 12px;
	border-radius: 100vh;
}
.credit .item_price a{
	color: #ffffff;
	text-decoration: none;
}

.footer_img{
	width: 65%;
	margin: 10% auto;
}

.btn_all{
	width: 300px;
	margin: 0 auto;
}


/* ============ other ============ */
.small{
    font-size: 80%;
}

.pc{
	display: block;
}
.sp{
	display: none;
}

.copy{
	font-size: 11px;
	letter-spacing: .6px;
	margin: 10% 0 0;
}


/************************************************************
 sp
************************************************************/

@media only screen and (max-width:767px){
	#ktr_wrap {
        width: 100%;
	}
	
    #ktr_head{
		padding: 0 0 0 0;
    }
	
    #ktr_head .head{
        width: 90%;
		padding-top: 18%;
    }
	
	.contents_wrap::before,
    .contents_wrap::after{
        width: 20px;
    }
	
    .contents_wrap .date_box {
        width: 75% !important;
    }
	
    .contents_wrap .date_box .date {
        font-size: 20px;
    }
	
    .contents_wrap .date_box .date span{
        font-size: 15px;
    }	
	
    .contents_wrap .date_box .date_small {
        font-size: 13px;
    }
	
    .contents_wrap .top_lead {
        font-size: 13px;
    }	
    
    .contents_wrap .logo_ktr {
        width: 180px;
    }	
	
    .contents_wrap .logo_swimmer {
        width: 185px;
        margin: 3% auto 10%;
    }	

	.item_wrap{
		margin: 0 0 3%;
	}
	
    .img_box1,.img_box2 {
        width: 70%;
    }
	
    .contents_wrap .img01 {
        width: 90%;
    }	
	
	.contents_wrap .icon_01,
	.contents_wrap .icon_02 {
        width: 70px;
    }	
	
    .contents_wrap .icon_01 {
        top: 20%;
        right: 7%;
    }	
	
    .contents_wrap .icon_02 {
        bottom: 17%;
        left: 7%;
    }	
	
    .icon_03 {
        top: -3%;
        left: 55%;
        width: 80px;
    }	
	
    .icon_04 {
		bottom: -3%;
        right: 12%;
        width: 60px;
    }	
	
    .icon_05 {
        bottom: -2%;
        left: 18%;
        width: 60px;
    }	

    .icon_06 {
        left: 53%;
        width: 70px;
    }
	
    .icon_07 {
        left: 10%;
        width: 55px;
    }	

    .icon_08 {
        left: 75%;
        width: 65px;
        bottom: 5%;
    }

    .icon_09 {
        width: 70px;
        margin: 10% auto;
    }
	
    .icon_10 {
        top: -5%;
        right: 10%;
        width: 55px;
    }	

    .icon_11 {
        bottom: 0%;
        left: 8%;
        width: 40px;
    }
	
    .icon_15{
        width: 25%;
    }
	
    .list_flex {
        width: 95%;
    }	
	
	.list_flex .list_img {
        width: 49%;
    }

    .info_wrap {
        width: 85%;
    }	
	
    .info_wrap .title_info {
        width: 260px;
        margin: 5% auto 5%;
    }
	
    .info_wrap .info_txt {
        font-size: 13px;
    }
	
    .icon_12 {
        top: 14%;
        left: 2%;
        width: 30px;
    }

    .icon_13 {
        top: 14%;
        right: 2%;
        width: 30px;
    }
	
    .last_img {
        width: 90%;
    }

    .brand {
        width: 90%;
		padding: 10% 0 8%;
    }	
	
    .logo_swimmer2 {
        width: 245px;
    }	
	
    .credit {
        width: 100%;
		align-items: flex-end;
    }

    .credit_wrap {
        width: 90%;
		margin: 0 5% 15% auto;
    }	
	
    .credit .item_name {
        font-size: 12px;
    }

    .credit .item_price {
        font-size: 12px;
    }

    .credit .item_price span.buy {
        font-size: 10px;
    }	
	
    .copy {
        font-size: 9px;
    }	
	
    #item04{
        margin: 0 0 5%;
    }
	
    .footer_img {
        width: 85%;
    }
	
	.btn_all{
		width: 235px;
	}
	
	.ribbon {
        width: 250px;
    }


	.pc {
		display:none;
	}
	.sp {
		display:block;
		width: 100%;
	}
}

/* ============ fade ============ */

.img_box1,.img_box2{
	position: relative;
    width: 60%;
    margin: 0 auto 3%;
	aspect-ratio: 750 / 1000;
}


.fade_img{
    margin: 0 auto;
    height: auto;
    position: absolute;
    background: center center no-repeat;
    animation: anime 4s 0s infinite;
    z-index: 0;
}

.fade_img:nth-of-type(2){
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.fade_img2{
    margin: 0 auto;
    height: auto;
    position: absolute;
    background: center center no-repeat;
    animation: anime 8s 0s infinite;
    z-index: 0;
}

.fade_img2:nth-of-type(2){
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

.fade_img2:nth-of-type(3){
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

.fade_img2:nth-of-type(4){
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

@keyframes anime {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    60% {
        opacity: 0;
        z-index: 10;
    }
    100% {
        opacity: 0;
    }
}

@keyframes yurayura {
    0% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(10deg);
    }
}