@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); */
@import url('https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=RocknRoll+One&display=swap');
/* 定数 */
:root {
    /*----------------------------------------------
    ブレークポイント 設定
    ※これに合わせて以下の画面コンテンツサイズは左右に余白を持つ想定で設定する
    ・PC： 最大幅 1300px以下以上
    ・タブレット：最大幅 768px;
    　screen and (max-width: 768px)
    ・スマートフォン: 最大幅480px;
    　screen and (max-width:480px)
    ----------------------------------------------*/
    /*----------------------------------------------
    画面コンテンツサイズ 設定
    ※ヘッダー・フッター等の画面幅は全幅とはせずこの幅で表示する
    ・PC コンテンツ幅： 1300px 
    ・タブレット：最大コンテンツ幅 768pc
    ・スマートフォン: 最大コンテンツ幅480px
    ※最低ブレークポイントと幅を合わせないとおかしい（これでもおかしいが・・）
    ----------------------------------------------*/
    --contents-width: 130rem;   /*pc コンテンツ幅*/
    --tb-contents_width: 76.8rem;    /*タブレット*/
    --sp-contents_width: 48rem;    /*スマートフォン*/

    /*----------------------------------------------
    色設定
    ----------------------------------------------*/
    --base-color:  rgba(255, 255, 255,1); /*#fff*/
    --base-color2:  rgba(246, 245, 234, 0.2); /*#fff*/
    --main-color: rgba(0, 71, 157,.9); /*#00479de6*/
    --main-color1: rgba(37, 151, 85, 1); /*#00479de6*/
    --main-color2: rgba(37, 151, 85, 0.5); /*#00479de6*/
    --main-color3: rgb(0, 71, 157); /*#00479de6*/
    --main-color4: rgba(22, 160, 133, 1); /*#16a085; */
    --main-text-color: rgb(39, 39, 39);
    --invert-main-text-color: rgb(255, 255, 255);
    --main-border-color: rgba(119,119,119,1); /*#7777777*/
    --accent-color:  #00246C;
    --accent-color1: rgba(37, 151, 85, .5);
    --accent-color2:  rgb(248, 39, 39);
    --accent-color3:  rgba(235, 201, 53, 1);
    --accent-color4:  rgba(92, 162, 213, 1);
    --accent-color5:  rgba(254, 189, 77, .8);
    --accent-color6:  #f68887;
    --input-focus-back-color: rgba(0, 71, 157,.2); 
    --progress-color: rgb(241, 241, 241, 1); 
    --progress-curr-color: rgba(22, 160, 133, 1);
    --white: rgba(255, 255, 255,1);
    --black: rgba(0,0,0,1);
    --black-border: rgba(119,119,119,.5);
    --gray1: rgba(153, 153, 153,1);
    --gray2: rgba(204, 204, 204,1);
    --light-gray: rgba(247, 247, 241,1);

    /*----------------------------------------------
    font family設定
    ----------------------------------------------*/
    /* --font-family: "Times New Roman", 游明朝, "Yu Mincho", 游明朝体, YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", HiraMinProN-W3, HGS明朝E, "ＭＳ Ｐ明朝", "MS PMincho", serif; */
    /* --font-family: -apple-system, BlinkMacSystemFont, Roboto,"游明朝",'Yu Mincho',YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", Meiryo, serif;; */
    /* --font-family:-apple-system, BlinkMacSystemFont, Roboto,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'メイリオ' , Meiryo, sans-serif; */
    /* --font-family:-apple-system, BlinkMacSystemFont, Roboto,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'メイリオ' , Meiryo, sans-serif; */
    --font-family:-apple-system, BlinkMacSystemFont, "News Cycle", sans-serif, Roboto,"游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", 'メイリオ' , Meiryo, sans-serif;
    /* --font-family: "News Cycle", sans-serif; */

    /*----------------------------------------------
    font size設定(PC基本値)
    ----------------------------------------------*/
    /* 768以上はfont-sizeは固定値で設定 */
    /* ブレークポイントによりフォントサイズは帰るがあくまで固定font-sizeで設定(VWにはしない） */
    --font-size-s: 1.6rem;
    --font-size-m: 1.8rem;
    --font-size-l: 2.4rem;
    --font-size-2l: 3.0rem;
    --font-size-3l: 3.6rem;
    --font-size-4l: 4.2rem;
    --font-size-5l: 4.8rem;

    --font-size-h1: 4.0rem;
    --font-size-h2: 3.4rem;
    --font-size-h2-2: 2.8rem;
    --font-size-h3: 2.6rem;
    --font-size-h4: 2.2rem;
    --font-size-h5: 2.0rem;
    --font-size-btn: 2.0rem;
}

/* ----------------------------------
共通情報
---------------------------------- */
html {
    /* 基準フォントサイズ1remのサイズ設定：1rem:16px(ブラウザのデフォルトサイズ)を1rem:10pxに設定 */
    font-size: 62.5%; 
}
/*----------------------------------------------------------- 
    body CSS
------------------------------------------------------------*/
body{
    color: var(--main-text-color);
    font-family: var(--font-family);
    font-size: var(--font-size-m);
    margin: 0 auto;
    padding: 0;
    background-color:  var(--base-color);
}

h1, h2, h3, h4, h5, h6, pre, code, input, textarea, select, button {
    font-family: var(--font-family);
}

.link_button{
    width:28rem;
    height: 6rem;
    line-height: 6rem;
    font-size: var(--font-size-btn);
    color:var(--white);
    background-color:#00a8ca;
    padding:0 2rem;
    box-sizing:border-box;
    margin: 0 auto;
    text-align:center;
}
.link_button:hover {
    background-color: #00a2ffbd;
}
/*----------------------------------------------------------- 
    wrapper container CSS
------------------------------------------------------------*/
.wrapper{
    display: flex;
    flex-direction:column;
    align-items: center;
    margin: 0;
    padding: 0;
}
.section_wrap{
    width: 100%;
    text-align: center;
    text-align: left;
}
.full_width{
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    width: 100%;
    padding: 0;
    /* ネガティブマージン パターン*/																																																
    /* margin-left: calc(-50vw + 50%);																																																
    margin-right: calc(-50vw + 50%); */																																																
}
.contents_width{
    margin-left: auto;
    margin-right: auto;
    max-width: var(--contents-width);
    width: 100%;
    width: auto;
    /* padding: 0; */
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
}


/*----------------------------------------------------------- 
    form item CSS
------------------------------------------------------------*/
/* input 共通 */
input{
    padding: .5rem .5rem; /*ボックスを大きくする*/
    border: .2rem solid #ddd; /*枠線*/
    border-radius: .3rem; /*ボックス角の丸み*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}
input:focus {
    background-color: var(--input-focus-back-color);
    outline: 2px black solid;
}
select:focus {
    background-color: var(--input-focus-back-color);
    z-index: 10;
}

select{
    padding: .5rem .5rem; /*ボックスを大きくする*/
    border: .2rem solid #ddd;
    border-radius: .3rem; /*ボックス角の丸み*/
}
textarea{
    padding: .5rem .5rem; /*ボックスを大きくする*/
    border: .2rem solid #ddd; /*枠線*/
    border-radius: .3rem; /*ボックス角の丸み*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}
textarea:focus {
    background-color: var(--input-focus-back-color);
    outline: 2px black solid;
}
/*-------------------------------------------------
    付箋紙　ボタン(未使用）
-------------------------------------------------*/
.fusen_button {
    display: inline-block;
    text-decoration: none;
    padding: .5rem;
    background: #f7f7f7;
    border-left: solid .6rem #5bb1fc;
    color: #5bb1fc;
    font-weight: bold;
    box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.22);
}

.fusen_button:active {
    box-shadow: .5rem .5rem .5rem rgba(0, 0, 0, 0.11);
    transform: translateY(.2rem);
}
.fusen_button.yellow {
    border-left-color: #efcc4c;
    color: #efcc4c;
}

.fusen_button.blue {
    border-left-color: #5bb1fc;
    color: #5bb1fc;
}

.fusen_button.purple {
    border-left-color: #7e5bfc;
    color: #7e5bfc;
}

.fusen_button.red {
    border-left-color: #ff3c3c;
    color: #ff3c3c;
}
.fusen_button.rounded {
    border-radius: .4rem;
}

.fusen_button.rounded-right {
    border-radius: 0 .8rem .8rem 0;
}
.fusen_button.light-shadow {
    box-shadow: .3rem .3rem .3rem rgba(0, 0, 0, 0.14);
}

.fusen_button.light-shadow:active {
    box-shadow: .3rem .3rem .3rem rgba(0, 0, 0, 0.07);
    transform: translateY(1px);
}
.fusen_button.heavy-shadow {
    box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.14);
}

.fusen_button.heavy-shadow:active {
    box-shadow: 1rem 1rem 1rem rgba(0, 0, 0, 0.07);
    transform: translateY(1rem);
}
/* --------------------------------------------------
	以上が 1300pxを超えるＰＣ端末環境設定
----------------------------------------------------- */
/* --------------------------------------------------
	ここから 1300px以下のPC端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 1300px){
    :root{
        --font-size-l: 2rem;
    }
}
/* --------------------------------------------------
	ここから 768px以下のタブレッド端末環境設定
----------------------------------------------------- */
@media screen and (max-width: 768px){
    :root{
        /* font-size定数の数値を変更 */
        --font-size-s: 1.4rem;
        --font-size-m: 1.6rem;
        --font-size-l: 1.8rem;
        --font-size-2l: 2.0rem;
        --font-size-3l: 2.2rem;
        --font-size-4l: 2.4rem;
        --font-size-5l: 2.6rem;

        --font-size-h2: 3.2rem;
        --font-size-h2-2: 2.6rem;
        --font-size-h3: 2.4rem;
        --font-size-h4: 2.0rem;
        --font-size-h5: 1.8rem;
        --font-size-btn: 1.8rem; 
        --contents-width: var(--tb-contents_width);
    }
    .contents_width{
        margin-left: auto;
        margin-right: auto;
        max-width: var(--contents-width);
        width: 100%;
        box-sizing: border-box;
}
    /* メインコンテナ― */
    .container{
        flex-direction: column;
        justify-content: center;
    }
}
/* --------------------------------------------------
	ここから480px以下のモバイル端末環境設定
----------------------------------------------------- */
@media screen and (max-width:480px){
        :root{
        /* font-size定数の数値を変更 */
        --font-size-s: 1.4rem;
        --font-size-m: 1.6rem;
        --font-size-l: 1.8rem;
        --font-size-2l: 2.0rem;
        --font-size-3l: 2.2rem;
        --font-size-4l: 2.4rem;
        --font-size-5l: 2.6rem;
    
        --font-size-h2: 2.4rem;
        --font-size-h2-2: 2.2rem;
        --font-size-h3: 2.2rem;
        --font-size-h4: 2.0rem;
        --font-size-h5: 1.8rem;
        --font-size-btn: 1.8rem; 
        --contents-width: var(--sp-contents_width);
    }
    .contents_width{
        margin-left: auto;
        margin-right: auto;
        max-width: var(--contents-width);
        width: 100%;
        box-sizing: border-box;
    }
    
    .container{
        flex-direction: column;
        justify-content: center;
    }
}