@charset "euc-jp";

/* ----------------------------------------------------------
	contents
------------------------------------------------------------- */

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

/*p {
	font-size:100%;
}*/

p.sentence {
    line-height: 1.8;
}
p.sentence a {
    color: #333;
    text-decoration: underline;
}

.note,
.noteList li {
    color: #666;
    font-size: 12px;
    line-height: 1.6;
}

a:link,
a:hover,
a:visited,
a:active {
    text-decoration: none;
}

.pBtn {
    display: inline-block;
    text-align: center;
    font-weight: bold;
    color: #113d6b;
}

.pBtn img {
    padding-left: 4px;
}

.pBtn--green {
    padding: 8px 10px;
    color: #fff;
    background: #20b5aa;
}

.pBtn__circle--navy {
    font-size: 18px;
    padding: 16px 20px;
    border: 2px solid #113d6b;
    color: #113d6b;
}

.pBtn__circle--purple {
    font-size: 18px;
    padding: 16px 20px;
    border: 2px solid #4a67a8;
    color: #4a67a8;
}

.pBtn__circle--white {
    font-size: 18px;
    padding: 8px 30px;
    border: 2px solid #fff;
    color: #fff;
}

.pBtn__circle--white span {
    font-size: 84%;
}

.ttlWrap--center {
    text-align: center;
}

.ttl {
    color: #113d6b;
    font-weight: bold;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.ttl--primary {
    margin: 0 0 20px;
    font-size: 36px;
    line-height: 1.4;
}
.ttl--primary--feature {
    margin: 0 0 40px;
}

.ttl--secondary {
    margin: 0 0 24px;
    font-size: 28px;
}

.ttl--third {
    margin: 0 0 8px;
    font-size: 18px;
}

.ttl span {
    background: #ffde00;
}

.ttl .colorPaleBlue {
    background: none;
}

.ttl--sub {
    font-size: 24px;
    margin: 0;
}

.ul {
    list-style-type: disc;
    margin: 0 0 0 35px;
}

/* firstview */

.firstView {
    min-height: 345px;
    padding: 35px 0 0;
    margin-bottom: 50px;
    background: url(../img/top/bg_firstview.png) 50% 0 no-repeat;
}

.firstView__inner {
    position: relative;
}

.meritList {
    margin: 0 0 20px 10px;
}

.meritList li {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    background: #113d6b;
    display: inline-block;
    position: relative;
    padding: 0 20px;
    height: 34px;
    line-height: 34px;
    margin-right: 20px;
}

.meritList li:before {
    position: absolute;
    left: -10px;
    top: 0;
    content: " ";
    background: transparent;
    border-bottom: 34px solid #113d6b;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.meritList li:after {
    position: absolute;
    right: -10px;
    top: 0;
    content: " ";
    background: transparent;
    border-top: 34px solid #113d6b;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.mainVisual {
    margin-bottom: 20px;
}

.mainVisual h1 {
    display: inline;
    padding: 7px 8px;
    font-size: 50px;
    font-weight: bold;
    color: #000;
    background-color: #fff;
    line-height: 1.6;
}

.mainVisual h1 span.emphasis {
    color: #4873b6;
}

.mainVisual h1 span.br01 {
    padding-right: 10px;
}

.mainVisual h1 span.br02 {
    display: inline-block;
    padding-left: 10px;
}

.mainVisual__copy--sub {
    margin-top: 20px;
    font-weight: bold;
    font-size: 16px;
    line-height: 1.8;
}

.prPoint__content {
    position: absolute;
    right: 0;
    top: 140px;
}

/* introduction */

.introduction__inner {
    margin: 0 40px 60px;
}

/* recommend */

.recommend {
    margin-bottom: 60px;
}

.recommend__box--navy {
    border: 2px solid #113d6b;
    padding: 40px 40px 30px;
}

.recommend__head {
    float: left;
    padding-left: 40px;
}

.recommend__list {
    padding-left: 280px;
}

.recommend__list li {
    margin-bottom: 20px;
    padding-left: 28px;
    background: url(../img/top/ico_recommend_check.png) left top no-repeat;
    font-weight: bold;
    color: #113d6b;
}

/* video */

.video__wrap {
    text-align: center;
    margin-bottom: 75px;
    background: url(../img/top/bg_video.png) center 80% no-repeat;
    padding: 25px 0 65px;
}

.video__ttl span {
    font-size:14px;
}

.video__contents {
    position: relative;
    width: 100%;
    padding: calc(315/560 * 100%) 0 0;
}

.video__contents iframe{
    position: absolute;
    top: 22%;
    left: 15%;
    width: 70%;
    height: 70%;
    margin-bottom: 35px;
    border: 1px solid #113d6b;
}

.balloon {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 155%);
    margin-bottom: 5px;
    line-height:1;
    padding:15px 10px;
    min-width: 16em;
    max-width: 58%;
    color: #555;
    font-size: 15px;
    background: #113d6b;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    z-index: 1;
    text-align: center;
}
.balloon:before {
    content: "";
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, 0%);
    border: 15px solid transparent;
    border-top: 15px solid #113d6b;
}
.balloon p {
    font-weight: bold;
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 24px;
}

/* feature */

.feature__wrap {
    /* margin-bottom: 60px; */
}

.feature{
    position: relative;
    padding: 80px 0 60px 0;
}

.feature__pickup{
	width:40%;
    display:flex;
    align-items: center;
	justify-content:center;
}
.feature__pickup--balloon{
    position:relative;
    background:#cfdae3;
    margin-left:20px;
    padding:15px 20px;
    border-radius:10px;
    flex:1;
}
.feature__pickup--balloon:before{
    content:"";
    display:block;
    border:10px solid transparent;
    border-right:20px solid #cfdae3;
    position:absolute;
    top:50%;
    left:-30px;
    margin-top:-10px;

}
.pickup__caption {
    display:table;
    background:#0baea1;
    margin:0 0 5px;
    padding:5px 15px;
    color:#fff;
    font-size:12px;
    font-weight:bold;
}
.pickup__text {
    margin:0;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 999px) {
    .feature .note {
        text-align:left;
    }
    .feature__pickup{
        width:100%;
    }
}
.feature--xserver{
	margin-bottom: 10px;
    background: url(../img/top/bg_feature_xserver.png) center 76% no-repeat #e8edf1;
}
.feature--xbiz{
    margin-bottom: 10px;
    background: url(../img/top/bg_feature.png) center 58% no-repeat #e8edf1;
}

.feature--xdrive{
    margin-bottom: 10px;
    background: url(../img/top/bg_feature_xdrive.png) center 62% no-repeat #f2f4f9;
}

.feature--nextshop{
    background-color: #f2f4f9;
}

.feature__item {
    position: relative;
    flex-basis: 50%;
    padding: 40px 30px 24px;
    background-color: #fff;
}

.feature__item--support {
    margin-right: 40px;
}

.feature__icon {
    position: absolute;
    left: -8px;
    top: -10px;
}

.feature__module {
    float: left;
    width: 64%;
}

.feature__img {
    float: right;
}
.featureList + div .btn {
    background:#f2f3f9;
}

.featureList__item {
    padding: 5px;
}

.featureList__item h4 {
    font-size: 21px;
    font-weight: bold;
    color: #113d6b;
    letter-spacing: -0.03em;
	padding-left:30px;
	background: url(../img/top/ico_feature_point.png) no-repeat;
	background-size: 21px;
}

.maxrate_group{
	display: flex;
    justify-content: center;
    align-items: center;
	box-sizing: border-box;
	background:#fff;
    width: 100%;
    margin: 0 auto 30px;
	padding:5px;
}

.maxrate_group--ttl{
	text-align: center;
    color: #fff;
    background: #113d6b;
    padding: 5px 20px;
    margin-right: 10px;
}

.maxrate_bonus{
	text-align: center;
    color: #fff;
    background: #1fb5aa;
    padding: 5px 20px;
	margin-left: 10px;
    border-radius: 15px;
}

.feature__topic{
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature--xbiz .feature__topic{
	background: #e8edf1;
}

.feature__group{
	width:60%;
}
.feature__group--box{
    margin-right:20px;
    box-sizing: border-box;
}

.feature__other{
	background:#e8edf1;
}

.feature__other--group{
    display:flex;
    justify-content: space-between;
	padding:30px 0;
	border-bottom:1px solid #333;
}

.feature__other--group:last-child{
	border-bottom:none;
}

.feature__other--box{
	box-sizing: border-box;
	width:50%;
	padding: 30px 0 30px 2%;
}

.feature__other--box:first-child {
	border-right:1px solid #333;
	padding: 30px 2% 30px 2%;
}

.feature__other .ttl--primary{
	font-size: 20px;
}

.feature__other .ttl--servicename{
    height: 55px;
}

.feature__other .ttl--servicename__forwindows{
    height: 90px;
}

.feature__other .maxrate_group{
	 width: 420px;
}

.feature__other .maxrate_group--rate{
	text-align:center;
}

.feature__other .maxrate_bonus{
	display:block;
	margin-top:10px;
	margin-left:0;
}

.feature__other--xserver .maxrate_group {
    width: 490px;
    margin-left: -40px;
    margin-right: 0;
}

.option__group{
	position:relative;
	background:#fff;
	width:100%;
	padding: 30px 20px 15px;
	margin-bottom:30px;
	box-sizing: border-box;
}

.option__group--ttl{
	position:absolute;
	top:-40px;
	left:0;
}

.option__group--service{
	display: flex;
    justify-content: center;
    align-items: center;
}

.option__group--name{
	padding-right: 10px;
    text-align: center;
    font-size: 15px;
    font-weight: bold
}

.option__group--box{
	padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #333;
}

.option__group--caption{
	color:#113d6b;
	font-weight:bold;
	font-size:18px;
}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 999px) {
	.maxrate_group,.feature__other .maxrate_group{
		width:100%;
	}
	.maxrate_bonus{
		padding:5px;
	}
	.option__group{
		width:100%;
	}
	.option__group--service{
		display: block;
	}
	.option__group--box{
		padding-left: 0;
		margin-left: 0;
		border-left: none;
		border-top: 1px solid #333;
		margin-top: 10px;
    	padding-top: 15px;
	}
	.feature__group{
		width:100%;
	}
	.feature__group--box{
		width:100%;
		margin-right:0;
		margin-bottom:20px;	
	}
	.feature__topic{
		display:block;
	}
	.featureList__item h4{
		font-size: 24px;
		background-size: 27px;
		padding-left: 44px;
	}
    .feature__other .ttl--primary{
        font-size: 19px;
    }
    .feature__other .maxrate_group {
        display: block;
    }
    .feature__other .maxrate_group--ttl {
        margin: 0 0 10px;
    }
    .feature__other--xserver .maxrate_group {
        margin-left: 0;
    }
}
@media only screen and (min-width: 0) and (max-width: 767px) {
    .feature__other--xserver .maxrate_group {
        margin-left: 0;
    }
	
	.feature__other--group{
		padding:0;
	}
	
}

/* program */

.program {
}

.program__wrap {
    background: url(../img/top/bg_diagram.png) #e1effe 50% 0 no-repeat;
    margin: 60px 0;
}

.program__inner {
    margin: 0 auto;
    position: relative;
    min-height: 400px;
}

/* PC */
@media only screen and (min-width: 1000px) {
    .program__inner {
        width: 1000px;
    }
}

.program__img {
    position: absolute;
    left: 60px;
    top: -40px;
}

/* flow */

.flow__content {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    flex-flow: wrap;
    align-items: stretch;
    margin-bottom: 60px;
}

.flow__item {
    width: calc((100% - 5px) / 4);
    background: no-repeat 20px center;
    text-align: center;
    padding-top: 20px;
}

.flow__item--half {
    position: relative;
    border-right: 2px solid #113d6b;
}

.flow__item--half:after {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #fff;
    border-top: 2px solid #113d6b;
    border-right: 2px solid #113d6b;
    right: -14px;
    top: 50%;
}

.flow__item--end {
    background-color: #e1effe;
}

.flow__itemInner {
    padding: 10px 32px 16px;
}

/* rate */

.rate {
    margin-bottom: 60px;
}

.rate__ttl {
    border:2px solid #113d6b;
    margin:0 0 15px;
    padding:15px 25px;
    font-size:22px;
    font-weight:bold;
}

.rate__content {
    padding: 15px 15px 5px 246px;
}
.rate__content--xserver {
    margin-top:20px;
    background: #e8edf1 url("../img/top/img_rate_logo_xserver.png?date=240930") no-repeat 50px 50%;
}
.rate__content--xbiz {
    background: #e8edf1 url("../img/top/img_rate_logo_xbiz.png?date=240930") no-repeat 60px 50%;
}
.rate__content--xdrive {
    margin-top:20px;
    background: #f2f3f9 url("../img/top/img_rate_logo_drive.png?date=240930") no-repeat 70px 50%;
}

.rate__content--nextshop {
    margin-top:20px;
    background: #f2f3f9 url("../img/top/img_rate_logo_shop.png?date=240930") no-repeat 65px 50%;
}

.rate__content--vps {
    margin-top:20px;
    background: #e8edf1 url("../img/top/img_rate_logo_vps.png?date=250115") no-repeat 67px 50%;
}

.rate__content--win_game {
    margin-top:20px;
    background: #f2f3f9 url("../img/top/img_rate_logo_win_game.png") no-repeat 20px 50%;
}

.rate__content--win_game .rate__detail .rate__info {
	    padding: 40px 0;
}

.rate__content--cloudpc {
    margin-top:20px;
    background: #e8edf1 url("../img/top/img_rate_logo_xcloudpc.png") no-repeat 65px 50%;
}

.rate__content--securecore {
    margin-top:20px;
    background: #f2f3f9 url("../img/top/img_rate_logo_securecore.png?date=20250626") no-repeat 40px 50%;
}

.rate__detail{
    background:#fff;
    position:relative;
    margin:10px 0 0;
}
.rate__detail + .rate__detail {
    margin:20px 0 0;
}
.rate__detail:before{
    position:absolute;
    left:50%;
    top:-30px;
    margin-left:-20px;
    content:"";
    display:block;
    width:40px;
    height:40px;
    background:url("../img/top/ico_rate_plus.png") no-repeat center center #1fb5aa;
    border-radius:50px;
}
.rate__detail:first-child{
    margin:0;
}
.rate__detail:first-child:before{
    display:none;
}
.rate__detail.none:before{
    display:none;
}
.rate__header{
    display:flex;
    align-items: center;
}
.rate__detail--ttl {
    display:table;
    background:#113d6b;
    color:#fff;
    font-size:16px;
    font-weight:bold;
    padding:5px 10px;
    min-width:100px;
    text-align:center;
}
.rate__header--inner{
    display:flex;
    margin:5px 0 0;
}
.rate__label{
    display:flex;
    margin:0 0 0 5px;
}
.rate__label li{
    border:1px solid #113d6b;
    border-radius:50px;
    color:#113d6b;
    font-size:12px;
    font-weight:bold;
    margin:0 2px;
    padding:2px 15px;
}
.rate__notenum{
    color:#113d6b;
    font-size:12px;
    font-weight:bold;
}

.rate__info {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    position:relative;
    padding:12px 20px 8px;
}
.rate__info:before {
    content:"";
    display:block;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:95%;
    height:1px;
    background:#dadbdc;
}
.rate__info:nth-child(2):before {
    display:none;
}

.rate__info--ttl {
    font-size: 16px;
    font-weight: bold;
    color :#1fb5aa;
    margin-right: 15px;
    text-align: center;
}
.rate__info--ttl span{
    font-size: 16px;
    margin-right:.5em;
}
.rate__info--text{
    margin:0;
}

.rate__campaign{
    padding:7px 10px;
    background:#ffde00;
    color:#133f6f;
    font-weight:bold;
    text-align:center;
    font-size: 16px;
}
.rate__campaign--price {
    color:#ff4500;
}

.rate__example {
    margin:10px 0;
    font-size: 12px;
    font-weight: bold;
    text-align: right;
}
.rate__example__case {
    margin-right: 10px;
    color: #757577;
}
.rate__content--xserver .rate__example {
    color: #1b63a7;
}
.rate__content--xbiz .rate__example {
    color: #0f3965;
}
.rate__content--xdrive .rate__example {
    color: #4460a1;
}


/* SP */
@media only screen and (min-width: 0) and (max-width: 768px) {

    /* video */
    .video__wrap {
        padding: 45px 10px 45px;
    }
    .balloon {
        max-width: 75%;
        transform: translate(-50%, 10%);
        margin-bottom: 5px;
    }
    .balloon p {
        font-size: 17px;
    }
    .video__contents{
        position: relative;
        width: 100%;
        padding: calc(315/560 * 100%) 0 0;
    }
    .video__contents iframe {
        position: absolute;
        top: 5%;
        left: 5%;
        width: 90%;
        height: 90%;
        margin-bottom: 0%;
    }

    .rate__content {
        display:block;
    }
    .rate__content--xserver {
        padding: 100px 15px 5px 15px;
        background: #e8edf1 url("../img/top/img_rate_logo_xserver.png?date=210415") no-repeat center 25px;
    }
    .rate__content--xbiz {
        padding: 100px 15px 5px 15px;
        background: #e8edf1 url("../img/top/img_rate_logo_xbiz.png?date=210415") no-repeat center 25px;
    }
    .rate__content--xdrive {
        padding: 100px 15px 5px 15px;
        background: #f2f3f9 url("../img/top/img_rate_logo_drive.png") no-repeat center 25px;
    }
	
	.rate__content--nextshop {
        padding: 100px 15px 5px 15px;
        background: #f2f3f9 url("../img/top/img_rate_logo_shop.png") no-repeat center 25px;
    }
	.rate__content--vps {
		padding: 100px 15px 5px 15px;
		background: #e8edf1 url("../img/top/img_rate_logo_vps.png?date=250115") no-repeat center 25px;
	}
    .rate__content--win_game {
        padding: 100px 15px 5px 15px;
        background: #f2f3f9 url("../img/top/img_rate_logo_win_game_s.png") no-repeat center 25px;
        background-size: contain;
    }

	.rate__content--vps .rate__detail .rate__info {
		padding-top: 8px;
	}
    .rate__content--cloudpc {
        padding: 100px 15px 5px 15px;
        background: #e8edf1 url("../img/top/img_rate_logo_xcloudpc.png") no-repeat center 25px;
    }
	.rate__content--securecore {
		padding: 75px 15px 5px 15px;
		background: #f2f3f9 url("../img/top/img_rate_logo_securecore.png?date=20250626") no-repeat center 15px;
	}
    .rate__header{
        display:block;
    }
    .rate__detail{
        margin:10px 0 0;
    }
    .rate__detail + .rate__detail {
        margin:10px 0 0;
    }
    .rate__detail--ttl{
        display:block;
        padding:10px;
        text-align: left;
    }
    .rate__header--inner{
        margin:10px 10px 0;
    }
    .rate__info {
        display:block;
        text-align:center;
        padding:12px 15px 8px;
    }

    .rate__info--ttl {
        width: 100%;
        margin: 0 0 10px;
    }

    .rate__detail > p {
        margin-bottom: 0;
    }

    .rate__detail--managed {
        margin-left: 0;
        margin-top:40px;
    }

    .rate__example {
        text-align: center;
    }
    .rate__ttl{
        font-size:16px;
        padding:10px;
    }
    .rate__detail:before{
        position:absolute;
        left:50%;
        top:-20px;
        margin-left:-15px;
        content:"";
        display:block;
        width:30px;
        height:30px;
        background:url("../img/top/ico_rate_plus.png") no-repeat center center #1fb5aa;
    }
    .rate__campaign--price{
        display: block;
    }
}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 999px) {

    /* video */
    .video__wrap {
        padding: 27px 10px 50px;
    }
    .balloon {
        transform: translate(-50%, 50%);
        margin-bottom: 0px;
    }
    .balloon p {
        font-size: 24px;
    }
    .video__contents {
        position: relative;
        width: 100%;
        padding: calc(315/560 * 100%) 0 0;
    }
    .video__contents iframe {
        position: absolute;
        top: 10%;
        left: 7%;
        width: 85%;
        height: 85%;
    }

    .rate__content {
        display:block;
    }
    .rate__content--xserver {
        padding: 100px 15px 5px 15px;
        background: #e8edf1 url("../img/top/img_rate_logo_xserver.png") no-repeat center 25px;
    }
    .rate__content--xbiz {
        padding: 100px 15px 5px 15px;
        background: #e8edf1 url("../img/top/img_rate_logo_xbiz.png") no-repeat center 25px;
    }
    .rate__content--xdrive {
        padding: 75px 15px 5px 15px;
        background: #f2f3f9 url("../img/top/img_rate_logo_drive.png") no-repeat center 25px;
    }
	.rate__content--nextshop {
        padding: 100px 15px 5px 15px;
        background: #f2f3f9 url("../img/top/img_rate_logo_shop.png") no-repeat center 25px;
    }

    .rate__detail--managed {
        margin-left: 0;
        margin-top:40px;
    }

    .rate__example {
        text-align: center;
    }
    .rate__campaign--price{
        display: inline;
    }
	.rate__content--vps {
		padding: 100px 15px 5px 15px;
		background: #e8edf1 url("../img/top/img_rate_logo_vps.png?date=250115") no-repeat center 25px;
	}
    .rate__content--win_game {
        padding: 100px 15px 5px 15px;
        background: #f2f3f9 url("../img/top/img_rate_logo_win_game_s.png") no-repeat center 25px;
    }

	.rate__content--vps .rate__detail .rate__info {
		padding-top: 8px;
	}
    .rate__content--cloudpc {
        padding: 100px 15px 5px 15px;
        background: #e8edf1 url("../img/top/img_rate_logo_xcloudpc.png") no-repeat center 25px;
    }
	.rate__content--securecore {
		padding: 75px 15px 5px 15px;
		background: #f2f3f9 url("../img/top/img_rate_logo_securecore.png?date=20250626") no-repeat center 15px;
	}
    .rate__header{
        display:block;
    }
    .rate__detail + .rate__detail {
        margin:10px 0 0;
    }
    .rate__detail--ttl{
        display:block;
        padding:10px;
        text-align: left;
    }
    .rate__header--inner{
        margin:10px 10px 0;
    }
    .rate__info {
        display:block;
        text-align:center;
    }

    .rate__info--ttl {
        width: 100%;
        margin-bottom: 10px;
    }

    .rate__detail > p {
        margin-bottom: 0;
    }

    .rate__detail--managed {
        margin-left: 0;
        margin-top:40px;
    }

    .rate__example {
        text-align: center;
    }
    .rate__ttl{
        font-size:16px;
        padding:10px;
    }
    .rate__detail:before{
        position:absolute;
        left:50%;
        top:-20px;
        margin-left:-15px;
        content:"";
        display:block;
        width:30px;
        height:30px;
        background:url("../img/top/ico_rate_plus.png") no-repeat center center #1fb5aa;
    }
    .rate__campaign--price{
        display: block;
    }
}

/* payment */

.payment {
    margin-bottom: 60px;
}

.payment__content {

}
.payment__content--xserver {
    margin-bottom: 40px;
}

.payment__head {
    color: #fff;
    font-size: 18px;
    font-weight: bold;
    padding: 16px 16px 16px 80px;
    margin-bottom: 0;
    position: relative;
}
.payment__head img{
    width:35px;
    height:auto;
}
.payment__accordion{
    display:none;
}
.payment__accordion:checked ~ .payment__label .payment__head:after{
    transform:rotate(0deg);
}
.payment__accordion:checked ~ .payment__wrap{
    display:block;
}
.payment__head--xserver {
    background: #113c6b;
}
.payment__head--xbiz {
    background: #113c6b;
}
.payment__head--xdrive {
    background: #38579e;
}

.payment__head img {
    position: absolute;
    bottom: 0;
    left: 25px;
}
/*.payment__wrap {*/
/*    display:none;*/
/*}*/
.payDetail {
    position: relative;
    padding-bottom: 40px;
    background-size: contain;
}
.payDetail--xserver {
    background: url(../img/top/bg_payment.png) left top repeat-y;
}
.payDetail--xbiz {
    background: url(../img/top/bg_payment.png) left top repeat-y;
}
.payDetail--xdrive {
    background: url(../img/top/bg_payment_xdrive.png) left top repeat-y;
}

.payDetail__inner {
    position: relative;
    margin: 0 40px 20px;

    background: #fff;
    padding: 38px;
}
.payDetail--xserver .payDetail__inner {
    border: 2px solid #113d6b;
}
.payDetail--xbiz .payDetail__inner {
    border: 2px solid #113d6b;
}
.payDetail--xdrive .payDetail__inner {
     border: 2px solid #38579e;
}

.payDetail__inner .note {
    position: absolute;
    right: 38px;
    top: 38px;
}

.payDetail__inner .note--xdrive {
    position: static;
    right: auto;
    top: auto;
    margin: 10px 0 0;
}

.payDetail--xdrive .ttl {
    color: #3a599a;
}

.payDetail__tableContainer {
    display: flex;
}

.payDetail__table--sp {
    display: none;
}

.payDetail__table {
    position: relative;
    width: 80%;
    color: #113d6b;
}

.payDetail__table thead {
    font-size: 12px;
}
.payDetail__table--xserver thead {
    background-color: #d1dbe3;
}
.payDetail__table--xbiz thead {
    background-color: #d1dbe3;
}
.payDetail__table--xdrive thead {
    background-color: #e2e2eb;
}

.payDetail__table thead th {
    font-weight: bold;
    text-align: center;
    padding: 4px 12px;
}

.payDetail__table tbody tr {
    border-bottom: 2px solid #d1dbe3;
}

.payDetail__table tbody th {
    padding: 8px 12px 8px 20px;
}

.payDetail__table tbody td {
    padding: 8px 12px;
    text-align: center;
    font-size: 12px;
}

.payDetail__total {
    box-sizing: border-box;
    position: relative;
    width: 20%;
    border: 2px solid #20b5aa;
}

.payDetail__total__head {
    margin: 0;
    background: #20b5aa;
    border: 2px solid #20b5aa;
    color: #fff;
    text-align: center;
}

.payDetail__total__body {
    position: absolute;
    top: 45%;
    width: 100%;
    margin: 0;
    text-align: center;
    vertical-align: middle;
    font-weight: bold;
    color: #20b5aa;
}

.payDetail__total__body span {
    font-size: 28px;
    font-style: italic;
}

.payDetail__table__total {
    font-size: 13px !important;
    font-weight: bold;
}

.payDetail__table__grayOut {
    background: #f1f1f1;
    color: #999;
}

/* commission */

.commission {
    margin-bottom: 60px;
}

.commission__content {
    position: relative;
    margin-bottom: 20px;
    padding: 40px 20px 20px 370px;
    background-color: #e1effe;
}

.commission__ttl {
    position: absolute;
    left: 370px;
    top: -10px;
}

.commission__list {
    padding-left: 24px;
}

.commission__list li {
    margin-bottom: 16px;
}

.commission__list span {
    font-size: 28px;
    font-style: italic;
    color: #113d6b;
    margin-left: -24px;
}

.commission__img {
    position: absolute;
    left: 30px;
    top: 20px;
}

.commission__case {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 20px;
    position: relative;
}

.commission__case01:before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    position: absolute;
    border-top: 1px solid #113d6b;
    border-left: 1px solid #113d6b;
    left: 0;
    top: 0;
}

.commission__case02:before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    position: absolute;
    border-right: 1px solid #113d6b;
    border-top: 1px solid #113d6b;
    right: 0;
    top: 0;
}

.commission__case02 {
    flex-direction: row-reverse;
}

.case__content {
    padding: 40px;
}

.case__item {
    width: 50%;
}

.case__ttl {
    font-weight: bold;
    font-style: italic;
    margin-bottom: 20px;
}

.case__ttl span {
    font-size: 24px;
    padding-left: 8px;
}

/* download */

.download {
    width: 100%;
    background: #113d6b;
    margin-bottom: 60px;
	padding-top: 25px;
}

.download__content {
    position: relative;
    color: #fff;
}
.download__content__inner {
    padding: 30px 70px;
    width: 875px;
}

.download__content__inner p {
    width: 480px;
}

.download__link {
    position: relative;
    background: #113d6b;
	padding: 10px 0 20px;
 }
.download__link .holderSML {
    display: flex;
    justify-content: center;
}
.download__link__inner {
    /* padding: 20px 0 20px 300px; */
    text-align: center;
    display:flex;
    flex-wrap:wrap;
    justify-content: flex-start;
    width:894px;
    margin:0 -5px;
}

.download__link__btn {
     display: inline-block;
     width: 435px;
    margin: 0 5px 5px 0;
 }
.download__link__btn:last-child {
    width: 878px;
}

.download__link__btn > a {
    font-size: 16px;
    display: block;
    padding-right:0;
    padding-left:0;
}
.download__link__btn img {
    width:15px;
}
.download__link__btn br {
    display:none;
}

.download__link__btnTtl {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.download__img {
    position: absolute;
    left: 600px;
    top: 0;
    z-index: 1;
}

.download__ttl {
    color: white;
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 20px;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 999px) {
    .download__content__inner {
        width: 100%;
        text-align: center;
    }
    .download__link__btn:last-child {
        width: 100%;
    }
    p.sentence {
        text-align: left;
    }
}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .download__content__inner {
        width: 100%;
        text-align: center;
    }
    .download__link__btn,
    .download__link__btn:last-child {
        width: 600px;
    }
    p.sentence {
        text-align: center;
    }
}

/* 2023.9 ¥À¥¦¥ó¥í¡¼¥É¥ê¥ó¥¯²þ½¤ */

.download__link__box {
    display: inline-block;
    margin:0 5px 10px;
    width: 435px;
    border: 1px solid #eee;
}

.download__link__box.wide {
    width: 100%;
}

.download__link__logo {
    padding: 8px;
    background-color: #eee;
}

.download__link__text {
    padding: 12px;
    color: #fff;
}

.download__link__text img {
    width: 15px;
}

.download__link__text a {
    font-size: 16px;
    display: block;
    color: #fff;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 999px) {
    .download__content__inner {
        padding: 0;
    }
    .download__content__inner p {
        width: 100%;
        text-align: left;
    }
    .download__link__box,
    .download__link__box:nth-child(5),
    .download__link__box:nth-child(6) {
        width: 100%;
    }
}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .download__content__inner {
        padding: 0;
    }
    .download__content__inner p {
        width: 100%;
        text-align: center;
    }
    .download__link__box,
    .download__link__box:nth-child(5),
    .download__link__box:nth-child(6) {
        width: 100%;
    }
}

/* ----------------------------------------------------------
	faq
------------------------------------------------------------- */

.contHeader {
    background: url(../img/common/h1_sub_contents.png) 50% 0 no-repeat;
    height: 120px;
    border-bottom: 1px solid #cacbce;
}

h1.contHeader__ttl {
    width: 1000px;
    margin: 0 auto;
    line-height: 120px;
    font-size: 30px;
    color: #333;
    font-weight: bold;
}

.subContents {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 999px) {
    .contHeader {
        height: auto;
        margin-top: 51px;
    }

    h1.contHeader__ttl {
        width: 93.75%;
        line-height: normal;
        font-size: 22px;
        padding: 15px 0;
    }

    .subContents {
        width: auto;
    }
}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .contHeader {
        margin-top: 0;
    }
}

/* faqlist
------------------------------------------------------------- */
h2.faq_ttl,
.subContents h4 {
    font-size: 22px;
    color: #133f6f;
    font-weight: bold;
}

ul.faq_index {
    background: #e8edf1;
    padding: 30px 40px;
    font-size: 18px;
}

ul.faq_index li {
    display: inline-block;
    margin-right: 40px;
}

ul.faq_index li:last-child {
    margin-right: 0px;
}

ul.faq_index a {
    color: #11548d;
}

.ico--arrowDown {
    color: #11548d;
    margin-right: 5px;
}

ul.faqLink.list {
    margin: 30px 0 40px;
}

ul.faqLink.list:last-child {
    margin-bottom: 80px;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    ul.faq_index {
        display: none;
    }

    ul.faqLink.list {
        margin: 15px 0 40px;
    }
}

/* faqdetail
------------------------------------------------------------- */
.faqDetail {
    font-size: 20px;
}

.faqDetail h2 {
    position: relative;
    color: #133f6f;
    margin-top: 70px;
    font-weight: bold;
    line-height: 1.4;
    padding-left: 100px;
}

.faqDetail h3 {
    position: relative;
    color: #16a298;
    font-weight: bold;
    line-height: 1.4;
    margin-top: 100px;
    padding-left: 100px;
}

.faqDetail h2:before,
.faqDetail h3:before {
    position: absolute;
    left: 0;
    top: -25px;
    content: '';
    display: inline-block;
    width: 80px;
    height: 80px;
}

.faqDetail h2:before {
    background: #fff url(../img/common/ico_faqlist_qL2.png) 50% 50% no-repeat;
}

.faqDetail h3:before {
    background: #fff url(../img/common/ico_faqlist_a2.png) 50% 50% no-repeat;
}

.faqDetail .faqDetail__answer p {
    color: #333;
    font-size: 16px;
    font-weight: normal;
    margin: 50px 0 70px 100px;
    line-height: 1.8;
}

.faqDetail ul {
    font-weight: normal;
    font-size: 16px;
    list-style: disc;
    margin: 10px 0 80px 130px;
}

.faqDetail ul li {
    margin-bottom: 10px;
}

.faqDetail_back {
    text-align: center;
    margin-bottom: 30px;
}

.faqDetail_back i {
    margin-right: 5px;
}

.faqDetail_back a.concept__btn {
    width: 200px;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .faqDetail h2 {
        margin-top: 0px;
        padding-left: 70px;
    }

    .faqDetail h3 {
        margin-top: 50px;
        padding-left: 70px;
    }

    .faqDetail h2:before,
    .faqDetail h3:before {
        top: -5px;
        width: 60px;
        height: 60px;
    }

    .faqDetail .faqDetail__answer p {
        margin: 30px 0 70px 0px;
    }

    .faqDetail ul {
        margin-left: 30px;
    }
}

/* TABLET */
@media only screen and (min-width: 500px) and (max-width: 1000px) {
    .faqDetail h2 {
        margin-top: 20px;
        padding-left: 70px;
    }

    .faqDetail h3 {
        margin-top: 70px;
        padding-left: 70px;
    }

    .faqDetail h2:before,
    .faqDetail h3:before {
        top: -15px;
        width: 60px;
        height: 60px;
    }

    .faqDetail .faqDetail__answer p {
        margin: 30px 0 70px 0px;
    }
}

/* faq relation
------------------------------------------------------------- */
ul.faqLink {
    margin: 30px 0 80px;
}

ul.faqLink li a {
    border: 1px solid #113c66;
    margin-top: -1px;
    padding: 20px;
    font-size: 18px;
    display: block;
    color: #333;
    text-decoration: none;
}

ul.faqLink li a:hover {
    background: #e8f4ff;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    ul.faqLink li a {
        padding: 15px 10px 15px 3.3em;
        font-size: 16px;
        text-indent: -2.5em;
    }
}

/* ----------------------------------------------------------
	rule
------------------------------------------------------------- */
.agencyRule {
    margin-bottom: 80px;
}

.agencyRule ol {
    margin-left: -1em;
    padding-left: 1em;
}

.agencyRule h2 {
    color: #133f6f;
    font-size: 20px;
    border-bottom: 2px solid #133f6f;
    margin-top: 40px;
    padding-bottom: 7px;
    font-weight: bold;
}

.agencyRule h3 {
    color: #133f6f;
    font-size: 16px;
    margin: 0 0 15px;
    font-weight: bold;
}

.agencyRule h4 {
    color: #133f6f;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: normal;
}

.agencyRule h2 + h3 {
    margin-top: 15px;
}

.agencyRule p {
    line-height: 1.6;
}

.agencyRule ol.parent {
    list-style-type: decimal;
    margin-left: 0.5em;
}

.agencyRule ol.parent li {
    margin: 0 0 .5rem;
}

.agencyRule ol.children {
    list-style-type: lower-roman;
    margin-left: 1em;
}

.agencyRule ol.children li {
    margin: 0 0 1em 0;
}

.agencyRule .doc__body {
    padding-left: 1.5em;
}

.agencyRule .doc {
    padding-left: 1.5em;
    padding-bottom: 10px;
}

.agencyRule .doc_parent {
    padding-bottom: 40px;
}

.agencyRule .border--gray {
    background-color: #fff;
    border-color: #ccc;
}

.agencyRule .border {
    margin-bottom: 1em;
    padding: 12px 15px;
    border: 1px solid;
}

/* Tab */
@media only screen and (min-width: 768px) and (max-width: 999px) {

    .prPoint__content {
        position: absolute;
        right: 0;
        top: 186px;
    }

    .prPoint__content img {
        width: 80%;
    }

    .feature__module {
        float: none;
        width: 100%;
    }

    .feature__img {
        float: none;
        text-align: center;
    }

    .payDetail__inner {
        padding: 16px;
    }

    .payDetail__inner .note {
        position: absolute;
        right: 16px;
        top: 16px;
    }
    .payDetail__inner .note--xdrive {
        position: static;
        right: auto;
        top: auto;
        margin: 10px 0 0;
    }

    .payDetail__table tbody th {
        padding: 4px 4px 4px 10px;
    }

    .payDetail__table tbody td {
        padding: 4px 6px;
        text-align: center;
    }

    .commission__img {
        width: 40%;
        position: absolute;
        left: 20px;
        top: 20px;
    }

    /* download */

    .download__content__inner {
        padding-left: 0;
    }

    .download__link__inner {
        /* padding: 20px 0 20px 0; */
    }

    .download__img {
        display: none;
    }

    /*--------------------------------------*/
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {

    * {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .pBtn {
        display: inline-block;
        text-align: center;
        font-weight: bold;
    }

    .pBtn--green {
        padding: 8px 16px;
        color: #fff;
        background: #20b5aa;
    }

    .pBtn__circle--navy {
        margin: 0 10px;
        font-size: 14px;
        padding: 8px 12px;
    }

    .pBtn__circle--white {
        font-size: 14px;
        padding: 8px 12px;
        border: 2px solid #fff;
        color: #fff;
    }

    .pBtn__circle--white span {
        font-size: 84%;
    }

    .ttl--primary {
        margin: 0 0 24px;
        font-size: 20px;
        line-height: 1.4;
    }

    .ttl--secondary {
        margin: 0 0 14px;
        font-size: 18px;
    }

    .ttl--third {
        margin: 0 0 8px;
        font-size: 16px;
    }

    .ttl--sub {
        font-size: 14px;
        margin: 0;
    }

    .firstView {
        padding: 30px 0 30px;
        min-height: 0;
        margin: 30px 0 20px 0;
        background: url(../img/top/bg_firstview.png) 50% 0 no-repeat;
    }

    .firstView__inner {
        position: relative;
    }

    .introduction__inner {
        margin: 0;
    }

    .mainVisual {
        text-align: center;
    }

    .mainVisual h1 {
        font-size: 6.5vw;
        padding: 3px 2px;
        line-height: 1.8;
    }

    .mainVisual h1 span.br01 {
        padding-right: 2px;
    }

    .mainVisual h1 span.br02 {
        padding-left: 2px;
    }

    .mainVisual__copy--sub {
        margin-top: 20px;
        font-size: 14px;
        line-height: 1.4;
    }

    .meritList {
        margin: 0 auto;
        text-align: center;
    }

    .meritList li {
        color: #fff;
        font-weight: bold;
        font-size: 3vw;
        background: #113d6b;
        display: inline;
        padding: 4px 6px;
        margin-right: 0;
    }

    .meritList li:before {
        border: 0;
    }

    .meritList li:after {
        border: 0;
    }

    .prPoint__content {
        position: static;
        border: 2px solid #113d6b;
        width: 90%;
        margin: 0 auto;
        padding: 10px 10px;
        background-color: #fff;
    }

    /* introduction */
    .introduction__inner {
        margin-bottom: 40px;
    }

    .recommend {
        margin-bottom: 40px;
    }

    .recommend__box--navy {
        border: 2px solid #113d6b;
        padding: 20px 20px;
    }

    .recommend__head {
        float: none;
        text-align: center;
        margin-bottom: 20px;
        padding: 0;
    }

    .recommend__list {
        padding-left: 0;
    }

    /* feature */
    .feature__wrap {
        margin-bottom: 40px;
    }
    .feature__wrap {
        margin-bottom: 40px;
    }

    .feature{
        position: relative;
        padding: 60px 0 40px 0;
    }

    .feature--xserver{
        background-image:none;
    }

    .feature--xbiz{
        background-image:none;
    }

    .feature--xdrive{
        background-image:none;
    }
	
	.feature--nextshop{
        background-image:none;
    }

    .feature__content {
        display: block;
    }

    .feature__item {
        position: relative;
        background-color: #fff;
        padding: 40px 20px 20px;
        margin: 0 0 20px 0;
    }

    .feature__item--support {
        margin-right: 0;
    }

    .feature__module {
        padding: 0;
    }

    .feature__img {
        width: 30%;
        margin-top: 10px;
    }

    .featureList {
        display: block;
    }
	
	.featureList__item h4{
        font-size:15px;
		padding-left: 22px;
    	background-size: 15px;
    }
	.maxrate_group{
		display: block;
		width:100%;
	}
	.feature__other .maxrate_group{
		width:100%;
	}
	.maxrate_group--ttl{
		margin-right:0;
		margin-bottom: 10px;
	}
	.maxrate_group--rate{
		text-align:center;
	}
	.maxrate_bonus{
		display:block;
		margin-left:0;
		margin-top:10px;
		padding:5px 0;
	}
	
	.feature__group{
		width:100%;
	}
	
	.feature__group--box{
		margin-bottom:20px;
	}
	
	.feature__topic{
		display:block;
	}
	.option__group{
		width:100%;
	}
	.option__group--service{
		display:block;
	}
	.option__group--name{
		padding-right:0;
	}
	.option__group--caption{
		font-size:16px;
	}
	.option__group--box{
		padding-left: 0;
		margin-left: 0;
		border-left: none;
		border-top: 1px solid #333;
		margin-top: 10px;
		padding-top: 15px;
	}
	.feature__other--group{
		display:block;
	}
	.feature__other--box{
		width:100%;
	}
	.feature__other--box:first-child{
		border-right:none;
		border-bottom:1px solid #333;
	}
	.feature__other--box.bdbn {
		border-bottom: none;
	}

    /* program */
    .program__wrap {
        background: none;
        margin: -10px 0 20px;
    }

    .program__inner {
        margin: 0 auto;
        width: 94%;
        position: relative;
        min-height: 100%;
    }

    .program__img {
        position: static;
    }

    /* flow */
    .flow__content {
        display: block;
        margin-bottom: 40px;
        text-align: left;
    }

    .flow__item {
        box-sizing: border-box;
        width: 100%;
        text-align: left;
        padding: 20px 10px;
    }

    .flow__item img {
        float: left;
        margin-right: 10px;
    }

    .flow__item--half {
        position: relative;
        border-right: 0px;
        border-bottom: 2px solid #d1dbe3;
    }

    .flow__item--half:after {
        content: "";
        display: block;
        width: 12px;
        height: 12px;
        position: absolute;
        -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
        transform: rotate(135deg);
        background-color: #fff;
        border-top: 2px solid #d1dbe3;
        border-right: 2px solid #d1dbe3;
        right: 50%;
        top: 97%;
    }

    .flow__itemInner {
        padding: 0;
    }

    .flow__item--end {
        background-color: #e1effe;
    }

    .flow__item--end img {
        margin-bottom: 0;
    }

    /* rate */
    .rate {
        margin-bottom: 40px;
    }

    .rate__img {
        text-align: center;
    }

    /* payment */
    .payment {
        margin-bottom: 40px;
    }

    .payment__head {
        font-size: 14px;
    }

    .payDetail__tableContainer {
        display: block;
    }

    .payDetail__table--pc {
        /*display: none;*/
    }

    .payDetail__table--sp {
        display: block;
    }

    .payDetail__table {
        display: block;
        width: 100%;
        margin-bottom: 10px !important;
    }

    .payDetail__table th,
    .payDetail__table td {
        padding: 8px !important;
        font-size: 12px !important;
    }

    .payDetail__table thead {
        display: block;
        float: left;
        overflow-x: scroll;
    }

    .payDetail__table thead th {
        padding: 10px 5px;
        border-bottom: 1px solid #113d6b;
        font-size: 12px;
    }

    .payDetail__table tbody {
        display: block;
        width: auto;
        overflow-x: auto;
        white-space: nowrap;
    }

    .payDetail__table th {
        display: block;
        width: auto;
    }

    .payDetail__table tbody tr {
        display: inline-block;
        margin: 0 -3px;
        border-bottom: none !important;
    }

    .payDetail__table td {
        display: block;
        font-size: 12px;
        border-bottom: 1px solid #dddddd;
    }

    .payDetail__total {
        width: 100%;
    }

    .payDetail__total__head {
        font-size: 12px;
    }

    .payDetail__total__body {
        position: relative;
        top: auto;
        left: auto;
        font-size: 12px;
    }

    .payDetail__total__body > span {
        font-size: 20px;
    }

    .payDetail {
        position: static;
        padding-top: 20px;
        padding-bottom: 0;
        background: none;
        background-size: contain;
    }

    .payDetail__inner {
        margin: 0 0 20px;
        background: #fff;
        padding: 12px;
    }

    .payDetail--xbiz .payDetail__inner{
        border: 2px solid #113d6b;
    }
    .payDetail--xdrive .payDetail__inner{
        border: 2px solid #38579e;
    }

    .payDetail__inner .note {
        position: static;
    }

    .payDetail__table {
        color: #113d6b;
        width: 100%;
        margin: 10px auto 0;
    }

    .payDetail__table thead {
        font-size: 12px;
    }
    .payDetail__table--xbiz thead {
        background-color: #d1dbe3;
    }
    .payDetail__table--xdrive thead {
        background-color: #e2e2eb;
    }

    .payDetail__table thead td {
        font-weight: bold;
        text-align: center;
        padding: 4px;
    }

    .payDetail__table tbody tr {
        border-bottom: 2px solid #d1dbe3;
    }

    .payDetail__table tbody th {
        padding: 8px 12px;
        width: 100%;
    }

    .payDetail__table tbody td {
        padding: 8px 12px;
        text-align: center;
    }

    .payDetail__table .total__head {
        background: #20b5aa;
        border: 2px solid #20b5aa;
        color: #fff;
    }

    .payDetail__table .total__body {
        border: 3px solid #20b5aa;

    }

    .payDetail__table .total__body th,
    .payDetail__table .total__body td {
        text-align: center;
        font-weight: bold;
        font-size: 16px;
        color: #20b5aa;
        vertical-align: middle;
    }

    .payDetail__table .total__body span {
        font-size: 28px;
        font-style: italic;
    }

    /* commission */
    .commission {
        margin-bottom: 40px;
    }

    .commission__content {
        position: relative;
        margin-bottom: 20px;
        padding: 30px 20px 20px;
    }

    .commission__ttl {
        position: absolute;
        left: 10px;
        top: -10px;
    }

    .commission__img {
        position: static;
        margin: 0 auto;
        width: 50%;
    }

    .commission__case {
        display: block;
        margin-bottom: 20px;
        position: relative;
    }

    .commission__case01:before,
    .commission__case02:before {
        border: 0;
    }

    .case__content {
        box-sizing: border-box;
        padding: 0;
    }

    .case__item {
        width: 100%;
    }

    .case__ttl span {
        font-size: 18px;
        padding-left: 8px;
    }

    /* download */

    .download {
        margin-bottom: 40px;
    }

    .download__content__inner {
        padding-left: 0;
    }

    .download__link__inner {
        /* padding: 20px 0 20px 0; */
    }

    .download__img {
        display: none;
    }

    .download__ttl {
        font-size: 20px;
        font-weight: bold;
        margin-bottom: 20px;
    }

    .download__link__btn{
        width:100%;
    }
    .download__link__btn br{
        display:inline-block;
    }

}

/* Tab */

@media only screen and (min-width: 768px) and (max-width: 890px) {
    .mainVisual__copy--sub {
        float: left;
        width: 65%;
    }

    .prPoint__content {
        width: 35%;
        top: 220px;
    }
}

/* ----------------------------------------------------------
    ¤ª???¤¤º?¤ï¤»
------------------------------------------------------------- */

/* ¥»¥¯¥·¥ç¥ó
------------------------------------------------------------- */
.contactSection {
    margin: 0 0 40px;
}

.contactSection__ttl {
    margin: 0 0 20px;
    color: #133f6f;
    font-size: 22px;
    font-weight: bold;
}

.iShort {
    width: 150px;
}

.iMiddle {
    width: 300px;
}

.iLong {
    width: 450px;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .iShort,
    .iMiddle,
    .iLong {
        width: 85%;
    }
}

.agreement {
    margin: 0 0 20px;
    padding: 20px;
    border: 1px solid #dddddd;
    text-align: center;
}

.agreement__label {
    font-size: 16px;
    font-weight: bold;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .agreement {
        text-align: left;
    }
}

.btn--primary {
    background: #fff;
    border: 1px solid #113d6b;
    color: #113d6b !important;
}

.btn--primary:hover {
    background-color: #f7f7f7;
}

.btn--baseColor {
    background: #113d6b;
    color: #fff !important;
}

.btn--baseColor:hover {
    background-color: #10365d;
}

.contactBtnBox {
    margin: 0 0 30px;
    text-align: center;
}

.contactBtnBox .btn {
    width: 260px;
}

.required {
    display: inline-block;
    margin: 0 0 0 10px;
    padding: 3px 5px;
    background-color: #10365d;
    color: #fff;
    font-size: 12px;
}

.footNote {
    margin-left: 1em;
    text-indent: -1em;
}

.contactguide {
    border: 1px solid #ccc;
    padding: 20px;
    margin-top: 40px;
}

.contactguide dt {
    font-weight: bold;
    margin-bottom: 10px;
}

/* ----------------------------------------------------------
	partner top
------------------------------------------------------------- */
.partner {
    margin-bottom: 30px;
}

.partner__balloon {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 0%);
    margin-bottom: 5px;
    line-height:1;
    padding:15px 10px;
    min-width: 16em;
    max-width: 40%;
    color: #555;
    font-size: 15px;
    background: #113d6b;
    z-index: 1;
    text-align: center;
}

.partner__balloon:before {
    content: "";
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, 0%);
    border: 15px solid transparent;
    border-top: 15px solid #113d6b;
}

.partner__balloon p {
    font-weight: bold;
    color: #fff;
    margin: 0;
    padding: 0;
    font-size: 24px;
}

.partner__wrap {
    margin-top: 40px;
    width: 100%;
    display: flex;
}

.partner__box {
    width: 100%;
    border: 2px solid #113d6b;
    padding: 10px 30px 20px;
    margin-right: 20px;
}

.partner__box:last-child {
    margin-right: 0;
}

.partner__box p {
    font-size: 1.4rem;
    color: #113d6b;
    font-weight: bold;
    line-height: 1.8;
    margin: 1.8rem 0 2rem;
}

.partner__box p span {
    background: #ffde00;
    padding: .2rem;
}

.partner__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: solid 1px #113d6b;
}

.partner__logo span {
    color: #113d6b;
    font-size: 1.1rem;
    font-weight: bold;
    margin-left: 10px;
}

.logo__codia {
    padding-top: 18px;
    padding-bottom: 20px;
}

.logo__codia img {
    width: 35%;
}

.logo__daichi {
    padding-top: 10px;
    padding-bottom: 10px;
}

.logo__daichi img {
    width: 25%;
}

.partner__Btn__box {
    text-align: right;
}

.partner__Btn {
    display: inline-block;
    text-align: right;
    font-size: 14px;
    background: #113d6b;
    color: #fff;
    padding: 5px 20px;
    border: 2px solid #113d6b;
    width: 50%;
}

.partner__Btn img {
    padding-left: 1.5rem;
}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .partner {
        margin-bottom: 75px;
    }

    .partner__balloon {
        max-width: 75%;
    }

    .partner__box p {
        font-size: 1.3rem;
        margin: 1.3rem 0 1.5rem;
    }

    .partner__logo {
        display: block;
        text-align: center;
    }

    .partner__logo img {
        display: block;
        margin: 0 auto;
    }

    .logo__codia {
        padding-top: 18px;
        padding-bottom: 10px;
    }

    .logo__codia img {
        width: 40%;
        padding: 10px 0 16px;
    }

    .partner__logo span {
        font-size: 1.3rem;
    }

    .logo__daichi {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .logo__daichi img {
        width: 35%;
        padding-bottom: 10px;
    }

    .partner__Btn {
        text-align: center;
        font-size: 14px;
        padding: 5px 20px;
        width: 100%;
    }

    .partner__Btn img {
        padding-left: 0;
    }
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .partner {
        margin-top: 60px;
        margin-bottom: 75px;
    }

    .partner__balloon {
        max-width: 75%;
    }

    .partner__box {
        width: 100%;
        margin-right: 0;
        box-sizing: border-box;
    }

    .partner__balloon p {
        font-size: 1rem;
    }

    .partner__wrap {
        display: block;
        margin-top: 20px;
    }

    .partner__logo span {
        color: #113d6b;
        font-size: 14px;
        font-weight: bold;
        margin-left: 10px;
    }

    .logo__codia {
        padding-top: 18px;
        padding-bottom: 20px;
    }

    .logo__codia img {
        width: 30%;
    }

    .logo__daichi {
        padding-top: 10px;
        padding-bottom: 15px;
    }

    .partner__box {
        margin-bottom: 30px;
        padding: 10px 20px 20px;
    }

    .partner__box p {
        font-size: 1.1rem;
        margin: 1rem 0 1.1rem;
    }

    .partner__Btn {
        text-align: center;
        font-size: 14px;
        padding: 5px 20px;
        width: 100%;
    }

    .partner__Btn img {
        padding-left: 0;
    }
}

/* ----------------------------------------------------------
	partner individual page
------------------------------------------------------------- */
#partner__individual__wrapper {
    background: #f1f1f1;
}

.partner__individual__topicPath {
    font-size: 12px;
    margin: 0 0 10px;
    padding: 20px 0 0 30px;
}

.partner__individual__topicPath .ico--chevronRight {
    color: #cecece;
    margin: 0 5px;
}

.partner__individual__topicPath__item {
    display: inline-block;
}

.partner__individual__topicPath a {
    color: #333;
    text-decoration: none;
}

.partner__individual__subContents {
    padding: 10px 70px;
}

.partner__individual__subContents__interview {
    font-size: 15px;
}

.partner__individual__subContents__interview a {
    color: #222;
}

.partner__individual__subContents__interview a:hover {
    color: #aaa;
}

.partner__individual__contents {
    width: 1000px;
    margin: 0 auto;
    background: #fff;
}

.partner__individual__subContents h2 {
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
}

.partner__individual__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.partner__individual__logo p {
    max-height: 100%;
    line-height: .8;
    text-align: left;
    margin: 0;
    margin-left: 20px;
}

.partner__individual__logo span {
    color: #222;
    font-size: 1.1rem;
    font-weight: bold;
}

.partner__individual__logo p a {
    color: #aaa;
    font-size: 12px;
}

.partner__individual__logo p a:hover {
    color: #222;
}

.partner__individual__logo__branding_technology_symfonical {
    display: flex;
    margin: 2rem 0 3rem;
}

.individual__logo__codia {
    padding-top: 18px;
    padding-bottom: 20px;
}

.individual__logo__codia img {
    width: 20%;
}

.individual__logo__branding_technology img {
    width: 40%;
}

.individual__logo__symfonical img {
    width: 40%;
}

.partner__individual__interview__box {
    margin-bottom: 70px;
}

.partner__individual__interview__box h3 {
    font-size: 1.3rem;
    color: #113d6b;
    font-weight: bold;
    padding-bottom: 15px;
    line-height: 1.5;
}

.partner__individual__interview__box > p {
    font-weight: bold;
    padding-bottom: 10px;
}

.partner__individual__interview__box > p:before {
    content: "¨¡¨¡¨¡";
    padding-right: 5px;
}

.partner__interview__box {
    margin: 0 0 2rem;
    line-height: 1.8;
}

.partner__interview__box img {
    margin: 0 0 3rem;
}

.partner__interview__box__talk {
    display: flex;
    margin-bottom: 2rem;
}

.partner__interview__question {
    position: relative;
    margin: 3rem 0;
    padding: 2rem 2rem 1rem;
    border: solid 3px #113d6b;
    border-radius: 8px;
}

.partner__interview__question .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #113d6b;
    font-weight: bold;
}

.partner__individual__text {
    font-weight: bold;
    padding-bottom: 2rem;
}

.partner__individual__text:before {
    content: "¨¡¨¡¨¡";
    padding-right: 5px;
}

.partner__individual__text__red {
    color: #ab3830;
    font-weight: bold;
    flex: 1;
}
.partner__individual__text__green {
    color: #3b8227;
    font-weight: bold;
    flex: 1;
}

.partner__individual__text__black {
    flex: 11;
}

.partner__individual__ttl {
    color: #222;
    font-size: 1.7rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    padding: 2rem 0;
}

h2.partner__individual__ttl__branding_technology_symfonical {
    color: #113d6b;
    background: #fff;
    text-align: center;
    padding: 0;
    margin: 0 0 1rem;
    line-height: 1.3;
}

h3.partner__individual__ttl__branding_technology_symfonical {
    color: #fff;
    background: #113d6b;
    text-align: center;
    padding: 1rem;
    margin: 4rem 0 2rem;
    line-height: 1.5;
}

h4.partner__individual__ttl__branding_technology_symfonical {
    color: #113d6b;
    background: #fff;
    font-size: 1.3rem;
    font-weight: bold;
    border-bottom: 1px solid #113d6b;
    margin: 4rem 0 2rem;
    padding: 0 0 .5rem;
}

.partner__individual__table {
    font-size: 1rem;
    width: 100%;
    margin: 3rem auto;
    border-collapse: collapse;
    border-top: 1px solid #eee;
    border-right: 1px solid #eee;
}

.partner__individual__table th {
    padding: 16px;
    border-bottom: 1px solid #fff;
    font-weight: normal;
    vertical-align: middle;
}

.partner__individual__table td {
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.partner__individual__table th{
    background-color: #eee;
}

.partner__individual__table td{
    background-color: #fff;
}

.partner__individual__interview {
    display: flex;
    align-items: flex-start;
    width: 100%;
    margin: 0 auto 30px;
}

.partner__individual__interview--balloon {
    position: relative;
    background: #e8edf1;
    margin-left: 20px;
    padding: 15px 20px 0;
    border-radius: 10px;
    flex: 1;
}
.partner__individual__interview--balloon:before {
    content: "";
    display: block;
    border: 10px solid transparent;
    border-right: 20px solid #e8edf1;
    position: absolute;
    top: 22%;
    left: -30px;
    margin-top: -10px;
}

.partner__individual__interview__pickup {
    font-size: 1.1rem;
    font-weight: bold;
}

.partner__individual__other__box {
    width: 40%;
    border: 2px solid #113d6b;
    padding: 10px 20px 15px;
    margin: 40px 0 50px;
}

.partner__individual__other__box p {
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: 1px;
    color: #222;
    margin: 1rem 0 1.5rem;
}

.partner__individual__partner__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: solid 1px #113d6b;
}

.partner__individual__partner__logo span {
    color: #222;
    font-size: 16px;
    font-weight: bold;
    margin-left: 10px;
}

.partner__individual__back {
    display: block;
    width: 40%;
    margin: 20px auto 70px auto;
    text-align: center;
    font-size: 16px;
    background: #fff;
    font-weight: bold;
    color: #113d6b;
    padding: 15px 20px;
    border: 2px solid #113d6b;
}

/* TABLET */
@media only screen and (min-width: 768px) and (max-width: 999px) {
    .partner__individual__contents {
        width: 100%;
        margin: 0;
    }

    .partner__individual__subContents {
        padding: 10px 30px;
    }
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
    .partner__individual__topicPath__item {
        line-height: 2;
    }

    .partner__individual__topicPath {
        font-size: 12px;
        margin: 10px 0 40px;
    }

    .partner__individual__contents {
        width: 100%;
        margin: 0;
    }

    .partner__individual__subContents {
        padding: 10px 20px;
    }

    #partner__individual__wrapper h1.contHeader__ttl {
        padding: 20px 0 10px 20px;
    }
    .partner__individual__topicPath {
        margin: 0;
    }

    .partner__individual__topicPath {
        padding: 10px 0 0 20px;
    }
    .partner__individual__logo {
        display: block;
    }

    .individual__logo__codia img {
        display: block;
        margin: 0 auto 5px;
        width: 40%;
    }

    .partner__individual__logo span {
        font-size: 15px;
        margin-left: 0;
    }

    .partner__individual__logo p {
        text-align: center;
        margin-top: 10px;
    }

    .partner__individual__logo p a {
        margin-left: 0;
    }

    .partner__individual__ttl {
        font-size: 1.2rem;
        padding: .5rem 0 1rem;
    }

    .partner__individual__interview__box h3 {
        font-size: 1.1rem;
        padding-bottom: 15px;
    }

    .partner__individual__interview {
        display: block;
    }

    .partner__individual__interview img {
        width: 15%;
        height: auto;
    }

    .partner__individual__interview--balloon {
        position: relative;
        background: #e8edf1;
        margin-top: 20px;
        margin-left: 0;
        padding: 15px 20px 2px;
        border-radius: 10px;
        flex: 1;
    }

    .partner__individual__interview--balloon:before {
        content:"";
        display: block;
        position: absolute;
        top: -10px;
        left: 8%;
        margin-left: -10px;
        border: 10px solid transparent;
        border-bottom: 10px solid #e8edf1;
    }

    .partner__individual__interview__pickup {
        font-size: 1rem;
    }

    .partner__individual__subContents h2 {
        font-size: 1.3rem;
    }

    .partner__individual__other__box {
        width: 100%;
        box-sizing: border-box;
        border: 2px solid #113d6b;
        padding: 10px 20px 15px;
        margin: 15px 0 50px;
    }

    .partner__individual__partner__logo {
        display: block;
        text-align: center;
        padding-bottom: 10px;
    }

    .partner__individual__partner__logo img {
        display: block;
        margin: 0 auto;
        width: 30%;
        margin-bottom: 5px;
    }

    .partner__individual__partner__logo span {
        font-size: 14px;
        margin-left: 0;
    }

    .partner__individual__other__box p {
        margin: 1rem 0;
    }

    .partner__individual__back {
        width: 50%;
        margin: 20px auto 50px auto;
        font-size: 14px;
        padding: 15px 20px;
    }
}

.feature__other--box .maxrate_group {
	display: flex;
	position: relative;
	padding: 25px;
	margin-top: 15px;
	justify-content: center;
}

.feature__other--box .maxrate_group--ttl {
	margin-right: 0;
	width: 95px;
	position: absolute;
	top: -20px;

}

.feature__other--box .maxrate_group--ttl {
	margin-right: 0;
	width: 95px;
	position: absolute;
	top: -20px;

}

.feature__other--box .maxrate_bonus {
	width: 330px;
}

/* SP */
@media only screen and (min-width: 0) and (max-width: 767px) {
	.feature__other--box .maxrate_bonus {
	width: 100%;
}
}

/* ----------------------------------------------------------
	footer note
------------------------------------------------------------- */
.footerNote {
    margin: 2rem auto 1rem;
    border: 1px solid #fff;
    width: 90%;
    max-width: 820px;
    padding: 1rem 1rem 0;
}

.footerNote h6 {
    color: #fff;
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
}

.footerNote p {
    text-align: left!important;
}

@media only screen and (min-width: 0) and (max-width: 767px) {
    .footerNote {
        width: 80%;
    }
}