﻿/*!
Theme Name: Theme of senoweb.jp
Description:セーノのWPテーマ
Author: コンティ
Author URI: https://senoweb.jp/
Version: 2.0
*/
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
main,
hgroup,
menu,
nav,
section,
summary,
main {
    display: block
}

body,
form,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
ul,
li,
pre,
blockquote,
input,
dl,
dd,
dt,
div,
address,
label {
    margin: 0;
    padding: 0
}

a img,
img {
    border: 0
}

li {
    list-style: none
}

ol {
    counter-reset: item
}

ol li {
    list-style-type: none;
    margin-left: 0px
}

ol li:before {
    counter-increment: item;
    content: counter(item, decimal-leading-zero)
}

em {
    font-style: normal;
    font-weight: bold
}

address {
    font-style: normal;
    font-weight: normal
}

form,
input,
select,
textarea,
button {
    margin: 0 2px 0 0;
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W6", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    padding: 1px;
    color: #404040;
    font-size: 100%
}

*:first-child + html form,
*:first-child + html input,
*:first-child + html select,
*:first-child + html textarea {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W6", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
}

body {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W6", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif;
    font-size: 20px;
    line-height: 1.5;
    text-align: center
}

*:first-child + html body {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W6", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
}

table {
    line-height: 1.5;
    text-align: left
}

*:first-child + html table {
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W6", "HIragino Kaku Gothic Pro W6", "HIragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: small
}

a {
    color: #201612;
    font-weight: bold;
    background-color: transparent;
    text-decoration: none
}

a:hover,
a:hover img {
    opacity: 0.7;
    background-color: transparent;
    text-decoration: none
}

a:visited {
    text-decoration: underline
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.clear {
    clear: both
}

.clearbox:after {
    content: "";
    display: block;
    clear: both;
    height: 0px
}

.clearbox {
    height: 100%
}

.top5 {
    margin-top: 5px
}

.top10 {
    margin-top: 10px
}

.top20 {
    margin-top: 20px
}

.top30 {
    margin-top: 30px
}

.top40 {
    margin-top: 40px
}

.top50 {
    margin-top: 50px
}

.p-top10 {
    padding-top: 20px
}

.p-top20 {
    padding-top: 20px
}

.bottom5 {
    margin-bottom: 5px
}

.bottom10 {
    margin-bottom: 10px
}

.bottom15 {
    margin-bottom: 15px
}

.bottom20 {
    margin-bottom: 20px
}

.bottom30 {
    margin-bottom: 30px
}

.bottom40 {
    margin-bottom: 40px
}

.bottom50 {
    margin-bottom: 50px
}

.bottom60 {
    margin-bottom: 60px
}

.bottom80 {
    margin-bottom: 80px
}

.bottom250 {
    margin-bottom: 250px
}

.left10 {
    margin-left: 10px
}

.left20 {
    margin-left: 20px
}

.left50 {
    margin-left: 50px
}

.left80 {
    margin-left: 80px
}

.left15 {
    margin-left: 15px
}

.right5 {
    margin-right: 5px
}

.right10 {
    margin-right: 10px
}

.right20 {
    margin-right: 20px
}

.right15 {
    margin-right: 15px
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.clearfix {
    display: inline-block
}

* html .clearfix {
    height: 1%
}

.clearfix {
    display: block
}

.clearfix2:after {
    content: " ";
    display: block;
    visibility: hidden;
    clear: both;
    height: 0.1px;
    font-size: 0.1em;
    line-height: 0
}

*1257897500* html .clearfix2 {
    display: inline-block
}

*1257897501* html .clearfix2 {
    height: 1%
}

.pkg {
    display: block
}

* html .hollyhack {
    height: 1%
}

.red {
    color: #F00
}

.red-bold {
    color: #bc312e;
    font-weight: bold
}

.blue {
    color: #54bedc
}

.blue-bold {
    color: #263d79;
    font-weight: bold
}

.pink {
    color: #df6182
}

.green {
    color: #2a9968
}

.gray {
    color: #777777
}

.orange {
    color: #fe9704
}

.yellow {
    font-weight: bold;
    color: #FFFF66;
    font-size: 12px
}

table {
    width: 100%;
    border-top: 1px dashed #e4e4e4;
    border-right: 1px dashed #e4e4e4
}

table th {
    background: #f4f4f4
}

table td,
table th {
    padding: 16px;
    border-bottom: 1px dashed #e4e4e4;
    border-left: 1px dashed #e4e4e4;
    overflow-wrap: break-word
}

table.none {
    border: none;
    margin: 0 auto
}

table.none td,
table.none th {
    border-bottom: none;
    border-right: none;
    padding: 0 3px
}

.font30 {
    font-size: 30px;
    font-weight: bold
}

.font24 {
    font-size: 24px;
    font-weight: bold
}

.font16 {
    font-size: 16px
}

.font18 {
    font-size: 18px
}

.font14 {
    font-size: 14px
}

.font12 {
    font-size: 12px
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

@font-face {
    font-family: "Montserrat";
    src: url("https://fonts.googleapis.com/css?family=Montserrat") format("woff")
}

@font-face {
    font-family: "nsjpr";
    font-style: normal;
    font-weight: 400;
    src: url("notosansjp/NotoSansJP-Regular-s.woff") format("woff")
}

@font-face {
    font-family: "nsjpr";
    font-style: normal;
    font-weight: 700;
    src: url("notosansjp/NotoSansJP-Bold-s.woff") format("woff")
}

body {
    font-family: "Montserrat", "nsjpr", "Noto Sans", sans-serif;
    text-align: left;
    color: #000;
    font-size: 20px;
    line-height: 1.8;
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

.pc-hyde {
    display: none
}

.line0 {
    line-height: 0
}

::selection {
    background: #e0f5ff
}

::placeholder {
    color: #c7c7c7
}

.mustcenter {
    margin: 0 auto !important
}

.font-nomal {
    font-weight: normal
}

.overflow-hidden {
    overflow: hidden
}

.textwidget,
.textwidget p {
    display: inline !important
}

.iframe iframe {
    max-width: 100%
}

#toggle {
    display: none
}

a .fa {
    color: #2a9968;
    font-size: 24px;
    vertical-align: middle
}

img {
    max-width: 100%;
    height: auto
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    padding: 10px;
    border: none;
    background: #f6f6f6
}

textarea {
    height: 244px
}

#toc_container {
    padding: 30px !important;
    border: none !important;
    line-height: 2.5 !important;
    margin-top: 3em !important;
    margin-bottom: 3em !important
}

#toc_container a {
    font-weight: normal !important
}

.ico-type--center {
    text-align: center;
    margin: 20px 0
}

.ico-fa {
    font-size: 36px
}

.bg-gray {
    background: #f4f4f4
}

.bg-gray-type--arrow {
    position: relative
}

.bg-gray-type--arrow:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 30px 0 30px;
    border-color: #ffffff transparent transparent transparent
}

.bg-gray-type--dark {
    background: #ddd
}

.bg-gray .step__title-squareheading {
    background: #fff !important
}

.bg-white {
    background: #fff
}

.wide {
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%)
}

.container {
    padding-top: 100px;
    padding-bottom: 100px;
    position: relative
}

.container-type--mini {
    padding-top: 60px;
    padding-bottom: 60px
}

.container-type--mini .section__title {
    font-size: 40px
}

.container-type--mini .title-type--en {
    margin-bottom: 30px
}

.container-type--mini .title-type--en:after {
    display: none
}

.container-type--mini .title-type--en:before {
    content: "";
    display: block;
    position: relative;
    background: url(img/dot.svg) no-repeat left;
    background-size: contain;
    width: 86px;
    height: 13px;
    opacity: .5;
    margin-bottom: 50px;
    margin-top: -68px
}

.container-type--footnav {
    background: #000;
    color: #fff;
    padding-top: 50px;
    padding-bottom: 50px
}

.container-type--tiles {
    background: url(img/tiles.jpg);
    color: #fff;
    font-size: 14px
}

.container-type--tiles .item__title {
    color: #fff;
    text-align: left !important
}

.container-type--tiles .item__title img {
    vertical-align: middle;
    margin-bottom: 16px;
    margin-right: 16px;
    height: 46px;
    width: auto
}

.container-type--tiles .item__title-link {
    color: #fff
}

.container-type--tiles .ico-fa {
    display: inline-block
}

.container-type--tiles .ico-fa-link {
    color: #fff
}

.container-type--tiles .ico-fa:not(:first-of-type) {
    margin-left: 10px
}

.container-type--tiles .section__title {
    font-size: 40px
}

.container-type--tiles .section__title:after {
    content: "";
    display: block;
    position: relative;
    background: url(img/dot.svg) no-repeat left;
    background-size: contain;
    width: 86px;
    height: 13px;
    opacity: .5;
    margin-top: 33.33333px
}

.container-type--tiles .section__subtitle {
    padding: 0
}

.container-type--tiles .btn {
    width: 100%
}

.container-type--bgtitlegray {
    position: relative
}

.container-type--bgtitlegray:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -35%;
    background: #f4f4f4;
    width: 100%;
    height: 80%;
    z-index: -1
}

.container-type--bgleftgray {
    padding-top: 0
}

.container-type--bgleftgray .wrapper {
    position: relative;
    background: #f4f4f4;
    padding: 100px 0
}

.container-type--bgleftgray .wrapper:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -100%;
    background: #f4f4f4;
    width: 200%;
    height: 100%;
    z-index: -1;
    margin-right: 20%
}

.container-type--bgrightgray {
    padding-top: 0
}

.container-type--bgrightgray .wrapper {
    position: relative;
    background: #f4f4f4;
    padding: 100px 0
}

.container-type--bgrightgray .wrapper:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -100%;
    background: #f4f4f4;
    width: 200%;
    height: 100%;
    z-index: -1;
    margin-right: 20%
}

.sub-container {
    padding-bottom: 50px
}

.sub-container-type--step {
    position: relative;
    padding-left: 40px
}

.sub-container-type--step:before {
    content: "";
    width: 8px;
    height: 8px;
    display: block;
    border-radius: 500px;
    -webkit-border-radius: 500px;
    -moz-border-radius: 500px;
    background: #000;
    position: absolute;
    top: 16px;
    left: 0;
    z-index: 1
}

.sub-container-type--step:first-of-type {
    margin-top: 50px
}

.sub-container-type--step:not(:last-of-type) {
    padding-bottom: 50px
}

.sub-container-type--step:not(:last-of-type):after {
    content: "";
    width: 2px;
    height: 100%;
    background: #ddd;
    position: absolute;
    top: 16px;
    left: 3px
}

.sub-container-type--step:last-of-type {
    padding-bottom: 0
}

.sub-container-type--step .step__title {
    font-size: 24px;
    margin-bottom: 20px
}

.sub-container-type--step .step__title-squareheading {
    background: #f4f4f4;
    padding: 0 0 0 8px;
    display: inline-block;
    margin-right: 20px
}

.sub-container-type--step .step__title-squareheading-num {
    display: inline-block;
    padding: 0 6px;
    margin-left: 6px;
    background: #000;
    color: #fff
}

.wrapper {
    max-width: 1100px;
    width: 92%;
    margin: 0 auto;
}

.sub-wrapper {
    max-width: 850px;
    width: 100%;
    margin: 0 auto
}

.box {
    padding: 50px
}

.box-type--border {
    border: solid 2px #ddd;
    padding: 20px;
    background: #fff
}

.box-type--borderbold {
    padding: 25px;
    border: solid #eee 6px;
    background: #fff
}

.box-type--panel {
    padding: 0;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.box-type--panel .mockup__pc {
    background: url(img/mockup--pc.png) no-repeat center top;
    background-size: contain;
    height: 280px !important
}

.box-type--panel .mockup__pc .mockup__window {
    width: 91;
    height: auto;
    top: 00px;
    margin: 0 auto;
    left: 0;
    right: 0
}

.box-type--panel .panel__item {
    width: 50%;
    padding: 40px;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.box-type--panel .panel__item .btn {
    width: 100%
}

.box-type--panel .panel__item .mockup__pc {
    height: auto !important
}

.box-type--panel .panel__item .mockup__pc:before {
    content: "";
    display: block;
    padding-top: 86%
}

.box-type--panel .panel__text .section__title {
    margin-bottom: 10px;
    font-size: 22px
}

.box-type--panel .panel__text .btn {
    margin-top: 20px
}

.box-type--thumb {
    display: table;
    width: 100%
}

.box-type--thumb .squarethumb {
    padding-right: 25px
}

.box-type--thumb .item {
    display: table-cell;
    vertical-align: top
}

.box-type--thumb .item__text {
    padding-top: 25px
}

.box-type--formarea {
    padding: 50px;
    background: #fff;
    box-shadow: 0 0 10px #ddd
}

.box-type--formarea .red {
    display: inline-block;
    font-size: 14px;
    padding: 0 8px
}

.box-type--formarea .btn {
    border: none
}

.box-type--formarea .btn:hover {
    opacity: .8;
    cursor: pointer
}

.box-type--faq {
    padding: 33.33333px;
    background: #fff;
    box-shadow: 0 0 10px #ddd
}

.box-type--faq:not(:first-of-type) {
    margin-top: 33.33333px
}

.box-type--faq .box {
    padding: 33.33333px
}

.box-type--num {
    position: relative;
    border-top: 4px solid #000;
    padding-top: 50px;
    padding-bottom: 50px
}

.box-type--num .squarenum {
    background: #000;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    padding: 6px;
    display: block;
    position: absolute;
    top: -2px;
    left: -2px;
    width: 1.8em;
    height: 1.8em;
    text-align: center;
    line-height: 1
}

.box-type--simple {
    font-size: 14px
}

.box-type--simple .section__title {
    margin-bottom: 0;
    line-height: 1.5
}

.vmiddle {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 9
}

.flexbox {
    -webkit-justify-content: space-between;
    justify-content: space-between;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.flexbox.col2 > .item {
    width: 48.5%
}

.flexbox.col2 > .item:nth-of-type(n+3) {
    margin-top: 20px
}

.flexbox.col2 > .item .item {
    font-size: 14px
}

.flexbox.col2 > .item .squarethumb__text {
    font-size: 14px
}

.flexbox.col2 > .item .squarethumb__title {
    font-size: 16px
}

.flexbox.col3 > .item {
    width: 32%
}

.flexbox.col3 > .item:nth-of-type(n+4) {
    margin-top: 20px
}

.flexbox.col3 > .item .btn {
    width: 100%;
    margin-top: 0
}

.flexbox.col3 > .item.double {
    width: 64%
}

.flexbox.col4 > .item {
    width: 24%;
    font-size: 14px
}

.flexbox.col4 > .item:nth-of-type(n+5) {
    margin-top: 20px
}

.flexbox.col5 > .item {
    width: 18%
}

.flexbox.col6 > .item {
    width: 16%
}

.flexbox.start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start
}

.flexbox.start > .item:last-of-type {
    margin-right: 0
}

.flexbox.start.col3 > .item {
    width: 31%;
    margin-right: 1%;
    margin-left: 1%
}

.flexbox.start.col4 > .item {
    margin-right: 1%
}

.flexbox.start.col5 > .item {
    margin-right: 1%;
    margin-left: 1%
}

.flexbox.balance > .item {
    flex: 1
}

.flexbox .item__title {
    line-height: 1.5;
    text-align: center;
    font-size: 18px;
    margin-bottom: 20px
}

.flexbox .item__img {
    line-height: 0
}

.flexbox .item__img img {
    width: 100%
}


/*-----------------------------
main
-----------------------------*/

body {
    text-align: center;
}

.mv {
    background: url(img/bg.jpg);
    background-size: cover;
    background-position: bottom 2rem center;
    padding: 5rem 0 0;
    background-repeat: no-repeat;
}

h1 {
    padding-bottom: 5rem;
}

h1 img {
    max-height: 250px;
    width: auto;
}

.box-gold {
    background: #fff;
    padding: 4.5rem 3rem 3rem;
    border-radius: 20px;
    position: relative;
}

.box-gold .item {
    text-align: left;
}

.gold {
    position: absolute;
    display: block;
    margin: 0 auto;
    top: -2.5rem;
    left: 0;
    right: 0;
}

.subbroker {
    padding: 3rem 0 5rem;
}

.subbroker > .flexbox > .item {
    background: #f4f4f4;
    padding: 2.5rem;
}

.subbroker > .flexbox > .item p {
    font-size: 1rem;
    text-align: left;
    letter-spacing: -0.1px;
}

.tb {
    display: table;
}

.tb-cell {
    display: table-cell;
    vertical-align: middle;
}

p.tb-cell {
    padding-right: 1.5em;
}


.cta {
    background: url(img/handshake.jpg);
    background-size: cover;
    background-position: center top;
    padding: 5rem 1rem;
    color: #fff;
}

.cta .txt {
    padding-bottom: 7rem;
}

.cta .txt h3 {
    font-size: 2rem;
    font-weight: bold;
    padding-top: 5rem;
}

.text-center a > span{
    display: inline-block;
    font-size: 1rem;
    color: #27a3ed;
    border-bottom: 1px dashed #27a3ed;
    padding: 0.5rem 0;
}




@media screen and (max-width: 960px) {
    
    .pc-hyde{
        display: block;
    }

    .item img {
        width: 100%;
        height: auto;
    }

    body {
        font-size: 1rem;
    }


    h1 {
        width: 80vw;
        margin: 0 auto;
        padding-bottom: 2rem
    }
    
    

    .mv {
        background: url(img/bg.jpg);
        background-size: cover;
        background-position: bottom 5rem center;
        background-repeat: no-repeat;
        padding: 2rem 0 0;
    }

    .flexbox.col2 .item {
        display: block;
        width: 100%;
    }

    .btn {
        max-width: 90vw;
        margin: 0 auto;
        text-align: center;
    }

    .box-gold {
        padding: 2rem 1rem 1rem;
    }

    .box-gold .bottom20 {
        margin-bottom: 0.2rem;
    }


    .gold {
        top: -25px;
    }


    .gold img {
        height: 50px;
        width: auto;
    }
    
    img.pc-hyde{
        max-height: 80px;
        width: auto;
        margin: 0 auto;
    }
    
    
    .subbroker{padding: 1rem 0 1.5rem;}

    .subbroker > .flexbox > .item p {
        font-size: 0.8rem;
    }

    .subbroker > .flexbox > .item {
        padding: 1rem;
        margin-bottom: 0.5rem
    }

    
    p.tb-cell{
        padding-right: 1rem;
    }
    
    p.tb-cell img{
        height: 40px;
        width:auto;
    }
    
    .cta{
        padding: 2rem 1rem
    }
    
    .cta .txt{
        text-align: left;
        padding-bottom: 3rem
    }
    
    .cta .txt h3 {
    font-size: 1.1rem;
        line-height: 1.3;
        letter-spacing: -0.5px;
/*    padding-top: 2rem;*/
        background: #ccc;
        color:#000;
        padding: 0.5rem;margin-top: 2rem;
        margin-bottom: 0.5rem;
}
    
    .text-center{
        padding-bottom: 1rem;
        line-height: 1;
    }
    
    .text-center a > span{
        display: block;
    }
    
    .sp-hyde{
        display: none;
    }

}
