@charset "utf-8";

/* CSS Document */

/*-----------------------------------
ＫＩＴＴＥ　ＧＡＫＵＳＡＩ

https://osaka.jp-kitte.jp/shop/gakusai2025/
-----------------------------------*/


/*-----------------------------------
全体
-----------------------------------*/
body.gakusei #contents {
    padding-bottom: 0;
    background-image: linear-gradient(90deg, #009fc933 1px, transparent 1px), linear-gradient(#009fc933 1px, transparent 1px);
    background-position: 10px 10px;
    background-size: 16px 16px;
}
body.gakusei.pc #contents > .inner{
    width: 1200px;
    min-width: none;
}
body.gakusei #contents-main {
    padding: 0;
    max-width: 1200px;
    margin: auto;
}
body.gakusei #contents-main .campaign-banner img, body.gakusei #contents-main .campaign-title  {
  animation: slideIn 2.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideIn {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  40% {
    opacity: 0.6;
  }
}
a:hover {
    opacity:1;
}
/*-----------------------------------
メインタイトル
-----------------------------------*/
body.gakusei #contents-main .title h2 {
    padding: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}
body.gakusei #contents-main .title h2 img {
    width: 100%;
    mix-blend-mode: multiply;
}
body.gakusei.pc #contents-main .title h2 img {
    margin-bottom: 20px;
}


/*-----------------------------------
コンテンツ
-----------------------------------*/
body.gakusei #contents-main .gakusei_content {
    position: relative;
}
body.gakusei #contents-main .gakusei_content::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mix-blend-mode: multiply;
    background: url(bg_colorful_bottom.png) no-repeat, url(bg_colorful_left.png) repeat-y, url(bg_colorful_right.png) repeat-y;
    background-position: bottom center, top left, top right;
    background-size: 100%, 28%, 28%;
    z-index:-1;
}
body.gakusei.pc #contents-main .gakusei_content::after {
    background: url(bg_colorful_bottom.png) no-repeat, url(bg_colorful_left_right.png) repeat-y;
    background-position: bottom center, top center;
    background-size: 100%, 105%;
    width: 100vw;
    box-sizing: border-box;
    transform: translateX(-51%);
    left: 50%;
}


body.gakusei #contents-main .campaign-inner {
    width: 80%;
    margin: 0 auto;
}

/*--------------
学生限定CPバナー　モード学園イベントバナー
---------------*/
body.gakusei #contents-main .campaign-banner {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 20px;
}
body.gakusei #contents-main .campaign-banner a {
    display: block;
    width: calc((100% - 20px) / 2);
    height: 100%;
    position:relative;
}
body.gakusei #contents-main .campaign-banner a figure{
    border: 1px solid #674498;
    /* box-shadow: 4px 4px #aaa; */
    background: #fff;
    padding: 10px;
    z-index: auto;
    margin: 0;
    position:relative;
    transition: 0.2s;
    border-radius: 0px;
    aspect-ratio:374 / 214;
    overflow: hidden;
}
body.gakusei #contents-main .campaign-banner a::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:10;
    background: #fff;
    opacity: 0;
    transition: 0.2s;
}
body.gakusei #contents-main .campaign-banner a:hover::before, body.gakusei #contents-main .campaign-banner a:hover::after{
    opacity: 0.45;
    transition: opacity 0.3s;
}
body.gakusei #contents-main .campaign-banner a::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #aaa;
    transform: translate(4px,4px) scale(1.01);
    mix-blend-mode: multiply;
    z-index: -1;
    transition: 0.3s;
}

/*--------------
タイトル　KITTE学生証キャンペーン
---------------*/
body.gakusei #contents-main h3 {
    background: transparent;
    padding: 0;
    margin: 50px auto 0;
    width: 80%;
}


/*--------------
キャンペーン概要
---------------*/
body.gakusei #contents-main .campaign-description {
    background-color: #fff;
    border: 2px solid #2194bb;
    padding: 20px 100px;
    margin-top: 20px;
}

/* メインテキスト */
body.gakusei #contents-main .campaign-description .main-text {
    font-size: 22px;
    text-align: center;
    font-weight: bold;
    line-height: 1.75;
}
body.gakusei #contents-main .campaign-description .main-text__red {
    color: #e90016;
}

/* instagramリンク */
body.gakusei #contents-main .campaign-description .insta-link {
    display: flex;
    max-width: 465px;
    margin: auto;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    position: relative;
    z-index: 20;
    border-radius: 18px;
}
body.gakusei #contents-main .campaign-description .insta-link a {
    color: #fff;
    font-weight: bold;
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px 120px 22px;
    border-radius: 18px;
    border: 1px solid #000;
    position: relative;
    background-color: #ea6094;
}
body.gakusei #contents-main .campaign-description .insta-link a::after {
    font-family: var(--fontfamily-icon);
    content: "\e5cc";
    margin: 0 0 0 4px;
    font-size: 30px;
    color: #fff;
    vertical-align: middle;
    position: absolute;
    top: calc(50% - 12px);
    right: 0;
}
body.gakusei #contents-main .campaign-description .insta-link a::before{
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index:10;
    background: #fff;
    opacity: 0;
    transition: 0.2s;
    border-radius: 18px;
}
body.gakusei #contents-main .campaign-description .insta-link a:hover::before, body.gakusei #contents-main .campaign-description .insta-link:hover::after{
    opacity: 0.45;
    transition: opacity 0.3s;
}
body.gakusei #contents-main .campaign-description .insta-link::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #aaa;
    transform: translate(4px,4px) scale(1.01);
    mix-blend-mode: multiply;
    z-index: -1;
    transition: 0.3s;
    border-radius: 18px;
}




body.gakusei #contents-main .campaign-description .insta-link a span:nth-of-type(2) {
    font-size: 20px;
}

/* 注意事項 */
body.gakusei #contents-main .campaign-description .cation {
    margin: 20px 50px 0;
    font-size: 13px;
}
body.gakusei #contents-main .campaign-description .cation li {
    position: relative;
    padding-left: 15px;
}
body.gakusei #contents-main .campaign-description .cation li::before {
    content: "●";
    position: absolute;
    top: 0;
    left: 0;
}

body.gakusei #contents-main .campaign-description .cation__red {
    color: #cd1102;
}



/*--------------
PDFリンク
---------------*/
body.gakusei #contents-main .gakuwari-pdf {
    display: flex;
    justify-content: center;
    align-items: center;
}
body.gakusei #contents-main .gakuwari-pdf-text {
    color: #eb6100;
    font-weight: bold;
    font-size: 22px;
    text-align: center;
    margin-top: 40px;
    position: relative;
    padding: 0 40px;
}

body.gakusei #contents-main .gakuwari-pdf-text::before, body.gakusei #contents-main .gakuwari-pdf-text::after {
    content: '';
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    border-top: 25px solid #eb6100;
    border-bottom: 0;
}
body.gakusei #contents-main .gakuwari-pdf-text::before {
    left: 0;
}
body.gakusei #contents-main .gakuwari-pdf-text::after {
    right: 0;
}


/*--------------
学割リスト画像
---------------*/
body.gakusei #contents-main .gakuwari-list {
    margin-top: 20px;
    text-align: center;
    padding-bottom: 150px;
}
body.gakusei #contents-main .gakuwari-list img {
    width: 100%;
    transition: 0.2s;
}
body.gakusei #contents-main .gakuwari-list img:hover {
    opacity: 0.9;
    transition: 0.3s;
}
body.gakusei #contents-main .gakuwari-list .gakuwari-list-cation {
    text-align: right;
}



/*----------------------------------------------------------------------
SP表示

----------------------------------------------------------------------*/


/*-----------------------------------
全体
-----------------------------------*/
body.gakusei.sp #contents .inner {
    padding: 0;
}


/*-----------------------------------
メインタイトル
-----------------------------------*/
body.gakusei.sp #contents-main .title {
    overflow: hidden;
}
body.gakusei.sp #contents-main .title h2 {
    width: 110%;
    margin: 0 -5%;
}


/*-----------------------------------
コンテンツ
-----------------------------------*/
body.gakusei.sp #contents-main .gakusei_content {
    background-position: bottom center, top left -25px, top right -25px;
    background-repeat: no-repeat, repeat-y, repeat-y;
    /* background-size: 100%, 30%, 30%; */
    padding-top: 10px;
}

body.gakusei.sp #contents-main .campaign-inner {
    width: 90%;
}

/*--------------
学生限定CPバナー　モード学園イベントバナー
---------------*/
body.gakusei.sp #contents-main .campaign-banner {
    flex-direction: column;
    width: 85%;
    margin: auto;
    gap: 10px;
}
body.gakusei.sp #contents-main .campaign-banner a {
    width: 100%;
}


/*--------------
キャンペーン概要
---------------*/
body.gakusei.sp #contents-main h3 {
    margin-top:30px;
    width: 100%;
}

body.gakusei.sp #contents-main .campaign-description {
    padding: 20px;
}

/* メインテキスト */
body.gakusei.sp #contents-main .campaign-description .main-text {
    line-height: 1.4;
    font-size: 18px;
}

/* instagramリンク */
body.gakusei.sp #contents-main .campaign-description .insta-link a {
    padding: 9px 30px 12px;
    border-radius: 18px;
    width: 100%;
}

/* 注意事項 */
body.gakusei.sp #contents-main .campaign-description .cation {
    margin: 20px 0 0;
    line-height:1.2rem;
}


/*--------------
PDFリンク
---------------*/
body.gakusei.sp #contents-main .gakuwari-pdf-text {
    color: #eb6100;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    margin-top: 30px;
    position: relative;
    padding: 0 20px;
}

body.gakusei.sp #contents-main .gakuwari-pdf-text::before, body.gakusei.sp #contents-main .gakuwari-pdf-text::after {
    border-right: 8px solid transparent;
    border-left: 8px solid transparent;
    border-top: 15px solid #eb6100;

}


/*--------------
学割リスト画像
---------------*/
body.gakusei.sp #contents-main .gakuwari-list {
    padding-bottom: 40px;
}
body.gakusei.sp #contents-main .gakuwari-list .gakuwari-list-cation {
    font-size: 12px;
}