@charset "utf-8";
/* CSS Document */

html{
color:#0d0015;
}
hr{
border-color: #e3007f;
}
.g-2{
margin: 0.5rem;
}
.g-3{
margin: 1rem;
}
img{
  max-width: 100%;
  height: auto;
}
p{
line-height: 1.8;
}
.p-number{
margin:0 5px;
vertical-align: text-top !important;
}
.g-nav-adj{
padding: 1px;
}
.font-15{
font-size: 15px;
}

.col-main{
color: #e3007f;
}
.col-sub{
color: #0091d7;
}.col-sub2{
color: #0000ff;
}
.col-docomo{
color: #cc0033;
}
.bgcol-docomo{
background-color: #cc0033;
color: #ffffff;
}
.col-au{
color: #ed5505;
}
.bgcol-au{
background-color: #ed5505;
color: #ffffff;
}

.col-softbank{
color: #BBBCBE;
}
.bgcol-softbank{
background-color: #BBBCBE;
color: #ffffff;
}
.bgcol-line{
background-color: #1dcd00;
color: #ffffff;
}


.bgcol-main{
background-color: #e3007f;
color: #ffffff;
}
.bgcol-main:hover{
opacity: 0.7;
background-color: #e3007f;
color: #ffffff;
text-decoration: none;
}
.bgcol-sub{
background-color: #0091d7;
color: #ffffff;
}
.bgcol-sub:hover{
opacity: 0.7;
background-color: #0091d7;
color: #ffffff;
text-decoration: none;
}

.bgcol-sub2{
background-color: #0000ff;
color: #ffffff;
}
.bgcol-sub2:hover{
opacity: 0.7;
background-color: #0000ff;
color: #ffffff;
text-decoration: none;
}

.bg-fce5f2{
background-color: #fce5f2;
}
.bg-e3f3fb{
background-color: #e3f3fb;
}
.bg-ef{
background-color: #efefef;
}
.bg-ffe9f6{
background-color: #ffe9f6;
}
/*濃いピンク*/
.bg-fef9fc{
background-color: #fef9fc;
/*薄いピンク*/
}
.bg-f3f5f9{
background-color: #f3f5f9;
}
/*薄い青グレー*/
.bg-e6e6ff{
background-color: #e6e6ff;
}
/*薄い青*/


.blq{
margin: 1rem;
padding: 1rem;
background-color: #efefef;
border-radius: 5px;
}

.del-line{
text-decoration: line-through double #e3007f;
-webkit-text-decoration: line-through double #e3007f;
}



/* ナビゲーション */

nav{
width: 100%;
}

.nav-cont{
	margin: 3px auto;
	padding: 1px;
}
.nav-list{
	width: 25%;

	padding:2px;
	float: left;
	box-sizing:border-box;
}
.nav-list-cont{

	width: 100%;
	float: left;
background: #ffffff;
}
.nav-list-cont a{
	color: #e3007f;
	display: block;
	padding: 12px 0;
	text-align: center;
    background: #ffffff;
    border: #e3007f solid 1px ;
}
.nav-list-cont a:hover{
color: #ffffff;
background: #e3007f;
text-decoration:  none;
}



.g-nav-e3007f, .g-nav-0000ff, .g-nav-0091d7 {
background: #ffffff;
}
.g-nav-e3007f a{
	color: #e3007f;
	display: block;
	padding: 12px 0;
	text-align: center;
    background: #ffffff;
    border: #e3007f solid 1px ;
}
.g-nav-e3007f a:hover{
color: #ffffff;
background: #e3007f;
text-decoration:  none;
}

.g-nav-0091d7 a{
	color: #e3007f;
	display: block;
	padding: 12px 0;
	text-align: center;
    background: #ffffff;
    border: #e3007f solid 1px ;
}
.g-nav-0091d7 a:hover{
color: #ffffff;
background: #0091d7;
text-decoration:  none;
}


.g-nav-0000ff a{
	color: #e3007f;
	display: block;
	padding: 12px 0;
	text-align: center;
    background: #ffffff;
    border: #e3007f solid 1px ;
}
.g-nav-0000ff a:hover{
color: #ffffff;
background: #0000ff;
text-decoration:  none;
}



@media(min-width: 600px){
.screenshot{
margin-right: auto !important;
margin-left: auto !important;
display: block !important;
width:50%;
}
.logo-fluid{
width: 240px;
}

}
@media(max-width: 599px){
.screenshot{
margin-right: auto !important;
margin-left: auto !important;
display: block !important;
width:80%;
}
}

.number{
vertical-align: bottom;
margin-right: 0.5rem !important;}

.strong-e3007f{
font-weight: bold;
color: #e3007f;
}

/*フォント*/
.h1{
margin:1rem 0;

/*border-top: double 4px #0d0015;
border-bottom: double 4px #0d0015;*/
}
.h2{
margin: 3rem 0 2rem;
padding: 0.5rem 0;
border-top: double 4px #e3007f;
border-bottom: double 4px #e3007f;
}
.d2{
margin: 3rem 0 1rem;
}
.h2-tab{
margin:1rem 0;
padding: 0.5rem 0;
}
.h3{
margin:2rem 0 1rem;
padding: 0.5rem 0;
border-top: solid 1px #e3007f;
border-bottom: solid 1px #e3007f;
}
.h3-tab{
margin:1rem 0;
padding: 0.4rem 0;
}
.h4{
margin:1rem 0;
padding: 0.5rem 0;
border-bottom: solid 1px #e3007f;
}
.d4{
margin:1rem 0;
padding: 0.5rem 0;
}
.h5{
margin:1rem 0;
padding: 0.5rem 0;
border-bottom: dashed 1px #e3007f;
}
.h6{
margin: 0.5rem 0;
padding: 0.5rem 0;
}
.font20{
font-size: 20px;
}
.font18{
font-size: 18px;
}
.small9{
font-size: 0.9rem;
}
.small8{
font-size: 0.8rem;
}
.small7{
font-size: 0.7rem;
}
.small6{
font-size: 0.6rem;
}
@media(max-width: 768px){
.font-adj{
font-size: 0.8rem;
}

.font-adj8{
font-size: 0.8rem;
}

}

/*@media(max-width: 599px){
h1, .h1 {
  font-size: 2rem;
}

h2, .h2 {
  font-size: 1.5rem;
}
h2 img{
width: 32px;
}

h3, .h3 {
  font-size: 1.25rem;
}

h4, .h4 {
  font-size: 1.15rem;
}

h5, .h5 {
  font-size: 1.1rem;
}
.font-adj{
font-size: 0.7rem;
}

.font-adj6{
font-size: 0.6rem;
}
}
*/
.img-circle {
  border-radius: 50%;
}
.img-circle5 {
  border-radius: 5%;
}
/*パンくずリスト*/

.breadcrumb {
  background-color: #fff;
}

.breadcrumb-item a {
  color: #0d0015;
}
.breadcrumb-item a:hover, .breadcrumb-item a:focus{
  background-color: none;
}
.breadcrumb-item.active {
  color: #0d0015;
}

/*枠込み*/
.waku{
max-width: 100%;
border: 1px solid #e3007f;
border-radius: 0.5rem;
margin: 0 0 2rem;
padding: 2rem 1rem 1rem;
}
.waku2{
max-width: 100%;
border: none;
border-radius: 0.5rem;
margin: 0 0 1rem;
padding:1rem;
}

/*テーブル*/

.table {
  width: 100%;
  margin-bottom: 1rem;
  color: #0d0015;
}

.table-bordered {
  border: 1px solid #0d0015;
}

.table-bordered th,
.table-bordered td {
  border: 1px solid #0d0015;
}
caption {
  padding-top: 0.75rem;
  padding-bottom: 0.25rem;
  color: #6c757d;
  text-align: right;
  caption-side: top;
}
.w-20 {
  width: 20% !important;
}
.w-15 {
  width: 15% !important;
}


/* ページトップボタン */

#page-top {
    position: fixed;
    bottom: 10px;
    right: 20px;
    font-size: 0.77rem;
	
}
#page-top a {
    background: #0d0015;
    text-decoration: none;
    color: #fff;
    width: 90px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
	opacity: 0.4;
}
#page-top a:hover {
    text-decoration: none;
    background: #0d0015;
	opacity: 1;
}

#page-top2 {
    font-size: 0.9rem;
	margin:2rem 0;

}
#page-top2 a {
	margin: auto;
    background: #e3007f;
    text-decoration: none;
    color: #fff;
    width: 200px;
    padding: 15px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
}
#page-top2 a:hover {
    text-decoration: none;
    background: #e3007f;
	opacity: 0.7;
}

/* ページトップボタン */

.sidemenu {
	margin:10px -10px;
}

.sidemenu .list-group .list-group-item{

border: #e3007f 1px solid;
color: #0d0015;
margin-bottom: 1px;
}
.sidemenu .list-group-item{
border: solid 1px #e3007f;
}

.sidemenu .list-group-item:hover{
color: #fff;
background-color: #e3007f;
}
.sidemenu a:hover{
text-decoration: none;

}
.bg-0d0015{
color:#fff;
background-color: #0d0015;

}
.bg-0d0015:hover{
color:#fff;
background-color: #0d0015;
opacity: 0.7;
}

.sidemenu .card{
border: solid #e3007f 1px;
margin-bottom: 2px;
}

/* footer */
.footer{
margin: 2rem 0;
}
.footer .list-group{
border: none;
}

.footer .list-group-item{
border: solid 1px #e3007f;
margin-bottom: 5px;

}

.footer .list-group-item:hover{
color: #fff;
background-color: #e3007f;
}
.footer a:hover{
text-decoration: none;

}
/* footer */

/* net-shopping */

.net-index card{
color: #ffffff;
background-color: #e3007f;
}

.net-index card:hover{
color: #e3007f;
background-color: #fef9fc;
}

/* net-shopping */


/*料金プランカード*/
.plan-card{
padding: 3px;
}

.plan-card-header{
font-size: 18px;
color: #fff;
background-color: #e3007f;
text-align: center;
padding: 0.5rem;
box-shadow: 2px 2px 2px 2px #efefef;
}
.plan-card-content{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid #e3007f;
height: 100px;
padding: 0.5rem;
background-color: #fef9fc;
box-shadow: 2px 2px 2px 2px #efefef;
}
.plan-card-content .plan-card-text{
font-size: 18px;
text-align: center;
}
.plan-card-content .plan-card-smalltext{
font-size: 14px;
}
@media(max-width: 599px){

.plan-card-header{
font-size: 16px;
}
.plan-card-content .plan-card-text{
font-size: 15px;
}
.plan-card-content .plan-card-smalltext{
font-size: 11px;
}


}

/*料金説明box*/
.plan-expl-box{
padding: 1rem 0.5rem;
border: 1px solid #e3007f;
box-shadow: 2px 2px 2px 2px #efefef;
}
.list-style-disc{
list-style-type: disc;
padding-left:1.5rem;
}
.list-style-disc>li{
margin: 1rem 0;
}

.page-consutitute-exp{
/*border: 1px solid #e3007f;*/
padding: 0.5rem;
background-color: #fef9fc;
box-shadow: 2px 2px 2px 2px #efefef;
border-radius: 0.5rem;

}

.intro {
position: relative;
padding: 0.75rem 1.25rem;
margin-bottom: 1rem;
border-radius: 0.25rem;
background-color: #ffffff;
border: 1px solid #e3007f;

}
.youtube-short{
display: flex;
flex-direction: column;
align-items: center;
}
/*.youtube-short iframe {
  position: relative;
  aspect-ratio:365 /648; 
}
*/

/*アフィリエイトリンカー*/
.aff-border {
border: 1px solid #e3007f !important;
border-radius: 5px;
}
.aff-thumbnail {
padding: 0.5rem;
margin-bottom: 1rem;
background-color: #fff;
border: 1px solid #e3007f;
border-radius: 0.25rem;
max-width: 100%;
height: auto;
}
.list-group-item-aff {
/*position: relative;*/
display: block;
padding: 1rem 1.25rem;
background-color: #fff;
text-align:center;
}
.aff-link{
display:block;
margin:0;
width:100%;
color:#fff;
font-weight: 500;
border-radius: 5px;
padding:9px 12px;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.amazon-button{
background-color: #FBB03B;
}
.amazon-button:hover{
color:#fff;
background-color: #FBB03B;
opacity: 0.5;
text-decoration: none;
}

.rakuten-button{
background-color: #ED1C24;
}
.rakuten-button:hover{
color:#fff;
background-color: #ED1C24;
opacity: 0.5;
text-decoration: none;
}

.maker-button{
background-color: #808080;
}
.maker-button:hover{
color:#fff;
background-color: #808080;
opacity: 0.5;
text-decoration: none;
}

.sumacon-button{
background-color: #e3007f;
}
.sumacon-button:hover{
color:#fff;
background-color: #e3007f;
opacity: 0.5;
text-decoration: none;
}

.btn-aff-1 {
  color: #ffffff;
		font-weight: 500;
  background-color: #FEBD69;
  border: 1px solid #111111;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

}

.btn-aff-1:hover {
  color: #fff;
  background-color: #FEBD69;
  border-color: #ffffff;
}

.pr{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
padding: 2rem 0;
}


.base-box{
border: 1px solid #0000ff;
background-color:  #ffffff;
box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 0 0 20px;
padding: 5px;

}
.base-box-e3007f{
border: 1px solid #e3007f;
background-color:  #ffffff;
box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 0 0 20px;
padding: 5px;
}
.base-box-e0ffff{
border: 1px solid #0000ff;
background-color:  #e0ffff;
box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 0 0 20px;
padding: 5px;
}
.list-box-group{
margin: 10px 5px;
}
.list-box-header{
padding: 5px;
border-radius: 5px;
font-size: 20px;
color: #0000ff;
background-color: #fff;
text-align: center;
}
.list-box-item{
padding: 5px;
}
.list-box-decimal{
padding: 5px;
list-style: decimal;
}
.title-box{
position: relative;
background-color: #ffffff;
box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 30px 0 20px;
padding: 20px 5px 5px 15px;
border: 1px solid #0000ff;
}
.title-box::before{
position: absolute;
top: -20px;
left: 20px;
content: attr(title);
padding: 5px 10px;
font-weight: bold;
color: #ffffff;
background-color: #0000ff;
border-radius: 5px;
border: 1px solid #0000ff;
}
.title-box-e3007f{
position: relative;
background-color: #ffffff;
box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 30px 0 20px;
padding: 20px 5px 5px 15px;
border: 1px solid #e3007f;
}
.title-box-e3007f::before{
position: absolute;
top: -20px;
left: 20px;
content: attr(title);
padding: 5px 10px;
font-weight: bold;
color: #ffffff;
background-color: #e3007f;
border-radius: 5px;
border: 1px solid #e3007f;
}

.title-box-e0ffff{
position: relative;
background-color: #e0ffff;
box-shadow: 3px 3px 7px 0px rgba(0, 0, 0, 0.2);
border-radius: 5px;
margin: 30px 0 20px;
padding: 20px 5px 5px 15px;
border: 1px solid #0000ff;
}
.title-box-e0ffff::before{
position: absolute;
top: -20px;
left: 20px;
content: attr(title);
padding: 5px 10px;
font-weight: bold;
color: #0000ff;
background-color: #e0ffff;
border-radius: 5px;
border: 1px solid #0000ff;
}