/*@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap");*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;}

html{
    scroll-behavior: smooth;
}

body {
  line-height: 1.7; }
ul li {
  list-style: none; }
blockquote, q {
  quotes: none; }
table {
  border-collapse: collapse;
  border-spacing: 0; }
th {
  text-align: left; }
h1, h2, h3, h4, h5, h6 {
  font-size: 100%; }
img, fieldset {
  border: 0; }
* {
  box-sizing: border-box; }
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden; }
.clearfix {
  display: inline-table;
  min-height: 1%; }
/* Hides from IE-mac \*/
* html .clearfix {
  height: 1%; }
.clearfix {
  display: block; }

/* End hide from IE-mac */
* html .clearfix {
  zoom: 1; }

/* IE6 */
*:first-child + html .clearfix {
  zoom: 1; }

/** 共通の基本仕様 **/

a{
    text-decoration: none;
}
body, html {
    font-family: "Meiryo", "Hiragino Kaku Gothic ProN", "Yu Gothic", "MS PGothic", sans-serif;
  font-weight: 400;
  letter-spacing: .02em;
  box-sizing: border-box;
  font-size: 93.75%;
  color: #444; }
html > body {
  font-size: 15px;
  /* Except IE */ }

  body{
    /*background: linear-gradient(180deg, rgb(255, 242, 78), rgb(0, 132, 226), rgb(4, 52, 146));
    background-attachment: fixed;*/
    /*background-color: #dffbfd;*/ /* 作業用BGカラー 両再度5%*/
}

.tbld{
    font-weight: bold;
}
.tudl{
    text-decoration: underline;
}


/*-----------------------キービジュアル設定---------------------*/

/*kv全体の調整*/
@media only screen and (max-width:766px){
    .pc_only1,.pc_only2{ 
        display: none;
    } 
}
@media only screen and (min-width:767px) and (max-width:1000px){
    /*----TOP----*/
    .pc_only2{ 
        display: none;
    }
}
@media only screen and (min-width:1001px){
    .pc_only1{ 
        display: none;
    }
}

/*-----------------------基本設定---------------------*/

/*------------------------------SP版--------------------------*/

@media only screen and (max-width:766px){
    .pc_only{ 
        display: none;
    }
    /*.all{
        margin:0 auto;
        width: 100%;
        max-width: 1000px;
        background-color: #fff;
    }*/
    main{
        width: 100%;
    }
    footer{
        width: 100%;
        background-color: #ddd;
    }
    .contents-all{
        width: 90%;
        margin: 0 auto;
    }

    .space_top{
        margin-top: 15%;
    }
    .space_bottom{
        margin-bottom: 15%;
    }
    h2{
        color: #005093;
        margin: 0 0 0 0;
        font-size: 1.4em;
        font-weight:bold;
        font-family: 'Times New Roman', Times, serif;
        text-align: center;
        line-height: 1.3em;
    }

    .ci-line{
        border-top: 10px solid rgb(4, 52, 146);
        border-image: linear-gradient(90deg, rgb(255, 242, 78), rgb(0, 132, 226), rgb(4, 52, 146));
        border-image-slice: 1;
    }

    /*------ ヘッダー ------*/
    .header-logo{
        margin: 15px 0 0 15px;
        display: inline-block;
    }
    .logo-sawakami{
        width:130px;
    }
    .area_logo{
        width: 100%;
        height: 60px;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        text-align: left;
        padding:0;
        margin: 0 0 0 0;
        z-index: 10;
    }
    .main-text_box{
        width:80%;
        margin: 0 10% 5% 10%;
    }
    .main-text{
        font-size: 0.85em;
        line-height: 2.1em;
        margin-bottom: 5%;
    }
    .sub-text{
        font-size: 0.85em;
        line-height: 1.8em;
        margin-bottom: 5%;
    }

    /*----   選択画面／タイトル・コンテンツ     ----*/
    #select_top{
        width: 90%;
        margin: 0 auto 0;
    }
    .top_title{
        /*background-image: linear-gradient(90deg, rgb(255, 242, 78), rgb(0, 132, 226), rgb(4, 52, 146));*/
        margin-bottom: 8%;
    }
    .selecttop_main{
        width: 60%;
        margin: 30% 20% 0;
    }
    .select_content{
        width: 90%;
        margin: 0 5% 15%;
        text-align: center;
    }
    /*.select_content a:hover{
        opacity: 0.6;
    }*/
    .select_text_sub1{
        font-size: 0.95em;
        line-height: 1.8em;
    }
    .select_text_sub2{
        font-size: 1.3em;
        line-height: 1.5em;
        margin-top: 50px;
        margin-bottom: 20px;
    }
    .selectbox1{
        float: left;
        width: 47%;
        background: transparent linear-gradient(180deg, #B1E500 0%, #007304 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
        text-align: center;
        font-size: 1.3em;
        color: #fff;
        vertical-align: middle;
    }
    .selectbox1::before{
        content: "";
        padding-top: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .selectbox1:active{
        background: #fff;
        border:1px solid #10b301;
        color: #10b301;
        box-shadow: 5px 10px 10px rgb(0,115,4,0.6);
    }
    .selectbox2{
        float: right;
        width: 47%;
        background: transparent linear-gradient(180deg, #00B9FF 0%, #003780 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
        text-align: center;
        font-size: 1.3em;
        color: #fff;
        vertical-align: middle;
    }
    .selectbox2::before{
        content: "";
        padding-top: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .selectbox2:active{
        background: #fff;

        border:1px solid #00a2ff;
        color: #00a2ff;
        box-shadow: 5px 10px 10px rgb(0,55,128,0.6);
    }
    .line_border{
        width: 70%;
    }

    /*---- CI ----*/
    #area_ci{
        width: 90%;
        margin: 0 5% 0;
    }
    #area_ci img{
        width: 80%;
        margin: 0 10%;
    }


    /** 留意事項など **/
    .consideration{
        background-color: #ddd;
        padding: 10% 0;
    }
    .title-consideration{
        font-size: 1em;
        font-weight: bold;
    }    
    .para-consideration{
        margin-bottom:0;
        width: 100%;
        line-height: 1.8em;
        font-size: 0.7em;
    }
    .copyright {
      background-color: #848484;
      padding: 45px 0; }
      .copyright p {
        color: #fff;
        font-size: 0.6em;
        text-align: center; }
    .disclamer {
        padding: 60px 0; }
    .disclamer_box {
        background-color: #eee; }
    .disclamer_box .box {
        margin-bottom: 40px; }
    .disclamer_box .box:last-child {
        margin-bottom: 0; }
    .disclamer_box .box h3 {
        font-size: 0.8em;
        font-weight: 700;
        margin-bottom: 5px; }
    .disclamer_box .box p {
        font-size: 0.7em;
        line-height: 1.4; }
    .disclamer_box .box p.attn {
        margin-top: 20px; }
    .disclamer_box .box p.attn2 {
        margin-top: 10px;
        margin-bottom: 10px;}
    .disclamer_box .box .line {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #555555; }
    .disclamer_box .box .line.bdru {
        border-top: 1px solid #555555; }
    .disclamer_box .box .line > div {
        padding: 10px 0;
        height: 100%; }
    .disclamer_box .box .line .left_blc {
        width: 180px;
        padding-left: 20px; }
    .disclamer_box .box .line .left_blc p {
        font-weight: 700; }
    .disclamer_box .box .line .right_blc {
        width: calc(100% - 180px); }    

}

/*----------------------PC版（767px～）-----------------------*/

@media only screen and (min-width:767px){

/*-----共通-------*/
    .sp_only{ 
        display: none;
    }
    /*.all{
        margin:0 auto;
        width: 100%;
        max-width: 1000px;
        background-color: #fff;
    }*/
    main{
        width: 100%;
    }
    footer{
        width: 100%;
        background-color: #ddd;
    }
    .contents-all{
        width: 90%;
        margin: 0 auto;
    }

    .ci-line{
        border-top: 15px solid rgb(4, 52, 146);
        border-image: linear-gradient(90deg, rgb(255, 242, 78), rgb(0, 132, 226), rgb(4, 52, 146));
        border-image-slice: 1;
        margin-bottom: 0px;
    }

    /*------ ヘッダー ------*/
    .header-logo{
        margin: 15px 0 0 20px;
        display: inline-block;
    }
    .logo-sawakami{
        width:180px;
    }
    .area_logo{
        width: 100%;
        height: 70px;
        position:absolute;
        top: 0;
        left: 0;
        display: block;
        text-align: left;
        padding:0;
        margin: 0 0 0 0;
    }
    .main-text_box{
        width:70%;
        margin: 0 15% 5% 15%;
    }
    .main-text{
        font-size: 1em;
        line-height: 2.1em;
        margin-bottom: 20px;
    }
    .sub-text{
        font-size: 1em;
        line-height: 1.8em;
        margin-bottom: 20px;
    }

    /*----   選択画面／タイトル・コンテンツ     ----*/
    #select_top{
        width: 90%;
        max-width: 800px;
        margin: 0 auto 0;
    }
    .top_title{
        /*background-image: linear-gradient(90deg, rgb(255, 242, 78), rgb(0, 132, 226), rgb(4, 52, 146));*/
        width: 70%;
        max-width: 1000px;
        margin:0 auto 15%;
        text-align: center;
        margin: 0 auto 30px;
    }
    .selecttop_main{
        width: 60%;
        max-width: 500px;
        margin: 15% 20% 5%;
    }
    .select_content{
        width: 70%;
        max-width: 1000px;
        margin:0 auto 100px;
        text-align: center;
    }
    /*.select_content a:hover{
        opacity: 0.6;
    }*/
    .select_text_sub1{
        font-size: 1.2em;
        line-height: 1.8em;
    }
    .select_text_sub2{
        font-size: 1.6em;
        line-height: 1.5em;
        margin-top: 50px;
        margin-bottom: 30px;
    }
    .box_width{
        max-width:600px;
        margin: 0 auto 0 ;
    }
    .selectbox1{
        float: left;
        width: 47%;
        background: transparent linear-gradient(180deg, #B1E500 0%, #007304 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
        text-align: center;
        font-size: 2em;
        color: #fff;
        vertical-align: middle;
        transition:all 0.3s ease-in-out;
    }
    .selectbox1::before{
        content: "";
        padding-top: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .selectbox1:hover{
        background: #fff;

        border:1px solid #10b301;
        color: #10b301;
        box-shadow: 5px 10px 10px rgb(0,115,4,0.6);
    }
    .selectbox1:active{
        background: #10b301;
        color: #fff;
    }
    .selectbox2{
        float: right;
        width: 47%;
        background: transparent linear-gradient(180deg, #00B9FF 0%, #003780 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
        text-align: center;
        font-size: 2em;
        color: #fff;
        vertical-align: middle;
        transition:all 0.3s ease-in-out;
    }
    .selectbox2::before{
        content: "";
        padding-top: 100%;
        display: inline-block;
        vertical-align: middle;
    }
    .selectbox2:hover{
        background: #fff;
        border:1px solid #00a2ff;
        color: #00a2ff;
        box-shadow: 5px 10px 10px rgb(0,55,128,0.6);
    }
    .selectbox2:active{
        background: #00a2ff;
        color: #fff;
    }
    .line_border{
        width: 90%;
        max-width: 800px;
    }

    /*---- CI ----*/
    #area_ci{
        width: 90%;
        max-width: 500px;
        margin: 0 auto 0;
    }
    #area_ci img{
        width: 100%;
    }

    /** 留意事項など **/
    .consideration{
        width: 100%;
        padding: 50px 0;
    }
    .title-consideration{
        font-size: 1.0em;
        font-weight: bold;
    }    
    .para-consideration{
        margin-bottom:0;
        width: 100%;
        line-height: 1.8em;
        font-size: 0.8em;
    }

    /** リスク手数料 **/
    .disclamer {
        width: 100%;
        margin: 0 auto;
        padding: 60px 0; }
    .disclamer h2 {
        font-size: 32px;
        font-weight: 700;
        color: #043492;
        text-align: center;
        margin-bottom: 60px; }
    .disclamer h2 span {
        border-left: 2px solid #043492;
        border-right: 2px solid #043492;
        line-height: 1;
        padding: 5px 25px; }
    .disclamer_box {
        background-color: #eee;
    }
    .disclamer_box .box {
        margin-bottom: 40px; }
    .disclamer_box .box:last-child {
        margin-bottom: 0; }
    .disclamer_box .box h3 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 5px; }
    .disclamer_box .box p {
        font-size: 12px;
        line-height: 1.4; }
    .disclamer_box .box p.attn {
        margin-top: 20px; }
    .disclamer_box .box p.attn2 {
        margin-top: 10px;
        margin-bottom: 10px;}
    .disclamer_box .box .line {
        display: flex;
        flex-wrap: wrap;
        border-bottom: 1px solid #555555; }
    .disclamer_box .box .line.bdru {
        border-top: 1px solid #555555; }
    .disclamer_box .box .line > div {
        padding: 10px 0;
        height: 100%; }
    .disclamer_box .box .line .left_blc {
        width: 180px;
        padding-left: 20px; }
    .disclamer_box .box .line .left_blc p {
        font-weight: 700; }
    .disclamer_box .box .line .right_blc {
        width: calc(100% - 180px); }   

/* 最下部コピーライト */
    .copyright {
        background-color: #848484;
        padding: 45px 0; }
    .copyright p {
        color: #fff;
        font-size: 12px;
        text-align: center; }
}

/**--------アニメーション設定------------**/

/* フェードイン */
.fadein{
    animation-name: fadeinAnime;
    animation-duration:2s;
    animation-fill-mode:forwards;
    opacity:0;
}
@keyframes fadeinAnime{
    from {
    opacity: 0;
    }
    to {
    opacity: 1;
    }
}
.trigger_fadein{
    opacity: 0;
}    

/* 拡大 */
.zoomIn{
	animation-name:zoomAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}
@keyframes zoomAnime{
    from {
        transform: scale(0.6);
    }
    to {
        transform: scale(1);
    }
}
.trigger_zoomin{
    }