@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');
/*-------------------------------------------------
    共通submit button
-------------------------------------------------*/
.btn_submit{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 40%;
    height: 4rem;
    font-size: var(--font-size-btn);
    color:var(--white);
    background-color: var(--main-color4);
    border: none;
    border-radius: 4rem;
    margin-top: 2rem;
    box-shadow: 0px 1rem 1rem -.5rem rgba(0,0,0,0.6);
}
.btn_submit:hover{
    color: #fff;
    background: var(--accent-color2);
}
/* 戻るボタン */
.btn_back{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 30%;
    height: 4rem;
    font-size: var(--font-size-btn);
    color:var(--white);
    background-color: var(--main-color4);
    border: none;
    border-radius: 4rem;
    margin-top: 2rem;
    box-shadow: 0px 1rem 1rem -.5rem rgba(0,0,0,0.6);
}
.btn_back:hover{
    color:var(--white);
    background: var(--accent-color2);
}
/* リンクボタン */
.btn_link{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 20%;
    height: 4rem;
    font-size: var(--font-size-btn);
    color:var(--white);
    background-color: var(--main-color4);
    border: none;
    border-radius: 4rem;
    margin-top: 2rem;
    box-shadow: 0px 1rem 1rem -.5rem rgba(0,0,0,0.6);
}
.btn_link:hover{
    color: #fff;
    background: var(--accent-color2);
}
/* 戻るボタン */
.btn_close{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 30%;
    height: 4rem;
    font-size: var(--font-size-btn);
    color:var(--white);
    background-color: var(--main-color4);
    border: none;
    border-radius: 4rem;
    margin-top: 2rem;
    box-shadow: 0px 1rem 1rem -.5rem rgba(0,0,0,0.6);
}
.btn_close:hover{
    color:var(--white);
    background: var(--accent-color2);
}
.text-center{
    text-align: center;
}
/*-------------------------------------------------
    共通H2タイトル行
-------------------------------------------------*/
.h2_title_wrap{
    display:flex;
    flex-direction: row;
    width: 100%;
    height: 8rem;
    margin-bottom: 1rem;
}
.h2_title{
    display:flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 1rem;
    background-color: rgba(97, 200, 140, 1);
    background-color: var(--main-color2);
    color: black;
    transform: skewX(-15deg);
    width: auto;;
}
.h2_title .jp_title{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    padding-left: 2rem;
    font-size: var(--font-size-h2);
    filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.5)); 
    /* 傾斜を元へ戻す */
    transform: skewX(15deg);
    padding: 0 1rem;
    width: auto;
}
.h2_title .en_title{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-content: center;
    padding-left: 1rem;
    font-size: var(--font-size-h2-2);
    filter: drop-shadow(5px 5px 4px rgba(0, 0, 0, 0.5)); 
    /* 傾斜を元へ戻す */
    transform: skewX(15deg);
    padding: 0 1rem;
    width: auto;
}

/*-------------------------------------------------
    共通タイトル余白
-------------------------------------------------*/
.top_margin{
    margin-top: 5rem;
}

/*-------------------------------------------------
    点滅 
-------------------------------------------------*/
.blinking{
	-webkit-animation:blink .7s ease-in-out infinite alternate;
    -moz-animation:blink .7s ease-in-out infinite alternate;
    animation:blink .7s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* --------------------------------------------------
	以上が 1300pxを超えるＰＣ端末環境設定
----------------------------------------------------- */
/* --------------------------------------------------
1300px(PCのコンテンツ幅)以下の画面幅で表示されるスタイル
----------------------------------------------------- */
@media screen and (max-width: 1300px) {
    /*-------------------------------------------------
        共通submit button
    -------------------------------------------------*/
    /*-------------------------------------------------
        共通H2タイトル行
    -------------------------------------------------*/
    .h2_title{
        width: auto;
    }
    .h2_title .jp_title{
        padding: 0 1rem;
        width: auto;
    }
    .h2_title .en_title{
        padding: 0 1rem;
        width: auto;
    }
    /*-------------------------------------------------
        共通タイトル余白
    -------------------------------------------------*/
}
/* --------------------------------------------------
	ここから 768px以下のモバイル端末環境設定
----------------------------------------------------- */
@media screen and (max-width:768px){
    /*-------------------------------------------------
        共通submit button
    -------------------------------------------------*/
    /*-------------------------------------------------
        共通H2タイトル行
    -------------------------------------------------*/
    .h2_title_wrap{
        height: 5rem;
    }
    /*-------------------------------------------------
        共通タイトル余白
    -------------------------------------------------*/
}
/* --------------------------------------------------
	ここから 480px以下のモバイル端末環境設定
----------------------------------------------------- */
@media screen and (max-width:480px){
    /*-------------------------------------------------
        共通submit button
    -------------------------------------------------*/
    /*-------------------------------------------------
        共通H2タイトル行
    -------------------------------------------------*/
    .h2_title_wrap{
        height: 4rem;
    }
    /*-------------------------------------------------
        共通タイトル余白
    -------------------------------------------------*/
}