@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Montserrat:wght@400;700&display=swap');


/*reset*/
/*******************************************************************/
html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal}
a { color: #000; transition: all .2s ease-out; text-decoration: none;}
*:focus { outline: none;}


/*LAYOUT*/
/*******************************************************************/
html { font-size: 62.5%;}
body { -webkit-text-size-adjust: 100%; -webkit-overflow-scrolling: touch; background: url("../img/bg.png") center repeat; font-family: 'BIZ UDPGothic', sans-serif; font-size: 1.6rem; line-height: 1.4; color: #000;}
#container { position: relative; width: 100%; overflow: hidden;}
#container::before, #container::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 41px; background: url("../img/line.svg") top repeat-x; z-index: 100; pointer-events: none;}
#container::after { top: auto; bottom: 0; transform: scaleY(-1);}
#loading { z-index: 100000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background: url("../img/chara.png") center no-repeat, url("../img/loading.svg") center 60vh no-repeat, url("../img/bg_light.png") center repeat;}
.bounce { opacity: 0;}
i, time, #footer { font-family: 'Montserrat', sans-serif; font-weight: 700;}



/*CONTENTS*/
/*******************************************************************/
article { position: relative; padding: 150px 0;}
article header { opacity: 0; width: 92%; max-width: 1200px; margin: 0 auto 100px; text-align: center;}
section { width: 92%; max-width: 1200px; margin: 0 auto; padding-top: 80px;}
section p { line-height: 2;}
.sp { display: none;}

#mv { text-align: center; background: url("../img/bg_light.png") center repeat;}
#mv h1 { opacity: 0; display: flex; grid-gap: 32px;}
#mv ul { display: flex; grid-gap: 4px; margin: 48px 0;}
#mv li { flex: 1; display: flex; flex-direction: column;}
#mv li .title { opacity: 0; align-self: center; display: inline-block;}
#mv li .title span { display: block; margin: 8px 0; text-align: right;}
#mv li figure { opacity: 0; position: relative; margin: auto 0 24px;}
#mv li figcaption { position: absolute; right: 0; bottom: 0;}
#mv li .btn { opacity: 0;}
#mv li .btn a { max-width: 233px;}
.btn { text-align: center;}
.btn a { position: relative; display: inline-block; width: 100%; max-width: 407px; padding: 16px; background: #E22616 url("../img/arr_w.svg") right 24px center no-repeat; border-radius: 40px; font-size: 1.5rem; font-weight: 700; color: #FFF; box-shadow: 0 5px 0 #B11F12;}
.btn a:hover { transform: translateY(3px); box-shadow: 0 2px 0 #B11F12;}
.btn a.disabled { pointer-events: none; background-color: #777; box-shadow: 0 5px 0 #555;}
#mv .text { opacity: 0;}
#mv .text h2 { margin-bottom: 16px; font-size: 2.4rem;}
.note { font-size: 1rem; line-height: 1.4;}

#brand { max-width: 1200px; margin: 0 auto; text-align: center; background: url("../img/brand_bg_l.png") left bottom no-repeat, url("../img/brand_bg_r.png") right 64px no-repeat;}
#brand section { width: 50%; padding-top: 40px;}
#brand p { margin-top: 48px; font-size: 2rem; font-weight: 700;}
.chara1 { position: absolute; top: 420px; left: 60px; width: 16%;}
.chara2 { position: absolute; top: 170px; right: 70px; width: 16%; text-align: right;}

#lineup .btn { position: absolute; bottom: 0; left: 0; width: 100%;}
#lineup section { position: relative; display: flex; padding: 40px 0 80px;}
#lineup .lineupimg { flex: 1;}
#lineup .lineupslide { position: relative; width: calc(50vw - 50% + 56%); min-width: 634px; margin-right: calc(50% - 50vw);}
#lineup .lineuptitle { position: relative; max-width: 634px; margin-left: 40px; margin-bottom: 16px;}
#lineup h3 { padding-right: 132px; text-align: center;}
.chara3 { position: absolute; top: -40px; right: 0;}
.chara4 { position: absolute; top: -40px; right: 80px;}
#lineup .swiper { padding: 0 40px 40px;}
#lineup .swiper-slide { width: 634px; height: auto; background: #FFF; border-radius: 17px;}
#lineup .swiper-slide .item { min-height: 284px; padding: 40px 50px;}
#lineup .swiper-slide .item h4 { display: flex; align-items: center; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 2px dotted #000;}
#lineup .swiper-slide .item h4 i { display: flex; justify-content: center; align-items: center; width: 77px; min-width: 77px; height: 77px; margin-right: 16px; background: #E22616; border-radius: 50%; font-size: 2.4rem; color: #FFF;}
#lineup .swiper-slide .item figure { float: left; margin-right: 24px;}
.swiper-next, .swiper-prev { position: absolute; top: calc(50% - 40px); display: block; width: 40px; height: 40px; background: url("https://zero-plus.co/product/curry/brand/img/next.svg") center no-repeat; background-size: contain; z-index: 10; transition: .2s ease-out;}
.swiper-next:hover, .swiper-prev:hover { opacity: 0.8;}
.swiper-next { left: 654px;}
.swiper-prev { left: 20px; transform: scaleX(-1);}
.swiper-pagination { bottom: 0!important;}
.swiper-pagination-bullet { background: #FFF; opacity: 1;}
.swiper-pagination-bullet-active { background: #E22616;}
#lineup .lineup2 { flex-direction: row-reverse; padding-top: 120px;}
#lineup .lineup2 .lineupslide { width: calc(50vw - 50% + 64%); margin-right: auto; margin-left: calc(50% - 50vw);}
#lineup .lineup2 .lineuptitle { margin-left: auto;}
#lineup .lineup2 .swiper-next { left: auto; right: 20px;}
#lineup .lineup2 .swiper-prev { left: auto; right: 654px;}

.news { display: flex; flex-direction: column; grid-gap: 20px;}
.news li { display: flex; padding: 32px; background: #8cceea; border-radius: 40px;}
.news li time { width: 100px; color: #E22616;}
.news li .newscontents { flex: 1; font-weight: 700;}

.media { width: auto; max-width: initial; padding-top: 100px; background-color: #2d5c8b;}
.media .swiper-wrapper { transition-timing-function: linear;}
.media .swiper-slide { width: 233px;}
.media figure { position: relative; padding-top: calc(254 / 233 * 100%); background: #FFF; border-radius: 20px;}
.media figure img { position: absolute; top: 0; left: 5%; width: 90%; max-width: 212px; height: 100%; border-radius: 20px; object-fit: scale-down;}
.media p { margin: 16px 8px; font-weight: 700; color: white;}

#sns { display: grid; grid-template-columns: 40% 1fr; grid-gap: 80px; max-width: 1200px; margin: 0 auto;}
#sns header { grid-column: 1 / 3;}
#sns section { position: relative;}
#sns h3 { margin-bottom: 24px; padding-left: 50px; background-position: left center; background-repeat: no-repeat; font-size: 2.4rem;}
.twitter h3 { background-image: url("https://zero-plus.co/product/curry/brand/img/twitter.svg");}
.instagram h3 { background-image: url("https://zero-plus.co/product/curry/brand/img/instagram.svg");}
.twitter { grid-column: 1 / 2;}
.instagram { grid-column: 2 / 3;}
.instagram ul { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px}
.instagram li a { position: relative; display: block; padding-top: 100%;}
.instagram li a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.more { position: absolute; top: 0; right: 0;}
.more a { display: inline-block; padding: 12px 40px 12px 24px; background: #F7F7F7 url("../img/greter.svg") right 24px center no-repeat; border-radius: 40px; font-size: 1.3rem; font-weight: 700;}

.form { max-width: 830px; padding: 80px; background: #FFF; border-radius: 38px; margin-top: 50px;}
.form dt { font-weight: 700;}
.form dt span { margin: 0 16px; font-size: 1.4rem; font-weight: 400;}
.form dd { padding: 16px 0 40px;}
.form input[type="text"], .form input[type="tel"], .form input[type="email"] { width: 100%; padding: 16px; background: #EFEFEF; border-radius: 3px; vertical-align: middle; font-size: 16px;}
.form textarea { width: 100%; min-height: 260px; padding: 16px; background: #EFEFEF; border-radius: 3px; font-size: 16px;}
.submit { text-align: center;}
.submit input[type='submit'] { display: inline-block; width: 100%; max-width: 218px; padding: 16px; background: #E22616; border: 5px solid #FAD7D5; border-radius: 40px; font-size: 1.7rem; font-weight: 700; color: #FFF; transition: .2s ease-out;}
.submit input[type='submit']:hover { opacity: 0.7;}
.must { display: inline-block; margin-left: 16px; padding: 2px 8px; vertical-align: middle; background: #E22616; font-size: 1.2rem; font-weight: 700; color: #FFF;}

.company { max-width: 830px;}
.company table { width: 100%; border-collapse: collapse; font-size: 1.4rem;}
.company tr { border-bottom: 1px solid rgba(0,0,0,.17);}
.company th { width: 25%; padding: 24px 24px 24px 0; text-align: left; white-space: nowrap;}
.company td { padding: 24px 0;}

#footer { padding: 80px 0; text-align: center; font-size: 1.2rem; font-weight: 400;}
#pagetop { position: fixed; right: 40px; bottom: 56px; z-index: 100;}




@media only screen and (max-width: 1024px){
#lineup .btn { position: relative; margin-top: 40px;}
#lineup section { display: block; padding: 40px 0;}
#lineup .lineupimg figure { text-align: center;}
#lineup .lineupslide { width: auto; min-width: initial; margin: 40px 0 0;}
#lineup .lineuptitle { max-width: initial; margin-left: 0;}
#lineup h3 { padding-right: 90px; text-align: left;}
.chara3 { position: absolute; top: -40px; right: 0; width: 90px;}
.chara4 { position: absolute; top: -40px; right: 0; width: 90px;}
#lineup .swiper { padding: 0 0 40px;}
#lineup .swiper-slide { width: 100%;}
#lineup .swiper-slide .item { min-height: initial; padding: 40px 24px;}
#lineup .swiper-slide .item h4 { position: relative; display: block; margin-bottom: 0;}
#lineup .swiper-slide .item h4 i { position: absolute; bottom: 103%; left: -16px; width: 32px; min-width: 32px; height: 32px; font-size: 1.2rem;}
#lineup .swiper-slide .item figure { float: none; margin: 0 auto; text-align: center;}
.swiper-next, .swiper-prev { top: calc(50% - 40px); width: 24px; height: 40px;}
.swiper-next { left: auto; right: 5px;}
.swiper-prev { left: 5px;}
#lineup .lineup2 { padding-top: 40px;}
#lineup .lineup2 .lineupslide { width: auto; margin: 40px 0 0;}
#lineup .lineup2 .swiper-next { left: auto; right: 5px;}
#lineup .lineup2 .swiper-prev { left: 5px; right: auto;}
}





@media only screen and (max-width: 768px){
#container::before, #container::after { height: 24px; background-size: auto 24px;}
article { padding: 56px 0;}
.sp { display: block;}

#mv { padding-top: 24px;}
#mv h1 { flex-direction: column-reverse; align-items: flex-end; grid-gap: 0;}
#mv h1 span:nth-of-type(2) { width: 40%; margin-bottom: -16px;}
#mv ul { flex-direction: column; grid-gap: 40px; margin: 48px 0;}
#mv li figure { margin: 10px auto 24px; padding: 0 15%;}

#brand { background: none;}
#brand section { width: 92%; padding-top: 0;}
#brand p { margin-top: 24px; font-size: 1.8rem;}
.chara1 { position: relative; top: 0; left: 0; width: auto; margin: 24px 40px 0 0;}
.chara2 { position: relative; top: 0; right: 0; width: auto; margin-top: 24px; text-align: right;}

.news li { display: block;}
.news li time { display: block; width: auto; margin-bottom: 8px;}

#sns { display: block;}
#sns h3 { padding-left: 40px; background-size: 30px auto; font-size: 2rem;}
.instagram { margin-top: 56px;}
.instagram ul { grid-template-columns: repeat(2, 1fr);}
.more a { padding: 8px 32px 8px 16px; background-position: right 16px center; font-size: 1.2rem;}

.form { padding: 40px 24px; background: #FFF; border-radius: 24px;}

.company th { display: block; width: auto; padding: 24px 0 0; white-space: normal;}
.company td { display: block; padding: 16px 0 24px;}

#footer { padding: 24px 0 200px;}
#pagetop { right: 0; bottom: 40px; transform: scale(0.8);}
}



@media print {
#container { width: 1080px;}
}