@charset "UTF-8";

:root {
  --main-theme-color: #d96ba7;
}

img {
	width: 100%;
}

.wrapper{
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.main-content {
    margin-top: 30px;
	flex: 1; /* flexに1つだけ数値を指定するとその要素は伸びる */
}

.g-recaptcha{
	margin-right:auto;
	margin-left:auto;
	text-align: center;
	width:300px;
	margin-top:20px;
}

.header {
	background: #fff;
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
}

.header .container {
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-webkit-justify-content: space-between;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
	max-width: 1140px;
	padding: 0.5em 0;
}

.header-logo {
	margin-bottom: 0;
	width: 20%;
}

.header .list-inline-item:not(:last-of-type) {
	border-right: 1px solid #333;
	padding-right: 0.5em;
}

.header-link {
	color: #333;
	-webkit-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}

.header-link:hover,
.header-link:active,
.header-link:focus {
	text-decoration: underline;
	color: #333;
}

footer{
    background-color: #AAAAAA;
    font-family: arial;
    margin-top: 30px;
    padding-top: 10px;
    width: 100%;
    padding: 30px 0;
    bottom: 0;
}

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

/*広告の設定*/
    /*広告サイズ設定*/
    #displayAd img, #smallAd img{
        width: 10em;
        height: 10em;
    }

    #smallAd{
        width:60%;
        margin-left: auto;
        margin-right: auto;
        border: 1px solid #000000;
    }
    .navbar-brand {
        padding: 0;
        margin: 0;
        height: 80px;
    }
    .navbar-brand img, .navbar-brand svg{
        height: 110%;
    }
    #layer101{
        fill: #d96ba7;
        
    }
    #layer102{
        fill: #FFFFFF;
    }
@media(max-width: 767px)    /* 768px以下 */
{
    #displayAd, #displayAd img{
        display: none;
    }
}

@media(min-width: 768px)    /* 768px以上 */
{
    #displayAd{
        margin-top: 2em;
        float: left;
    }
    #smallAd, #smallAd img{
        display: none;
    }
}

/* 汎用ボタン */
/* 通常のボタン色 */
.ars-btn-primary,
.ars-btn-primary.disabled, .ars-btn-primary:disabled {
	color: #fff;
	background-color: var(--main-theme-color);
	border-color: var(--main-theme-color);
}

/* focusされた時の枠線の色 */

.ars-btn-primary:focus, .ars-btn-primary.focus,
.ars-btn-primary:not(:disabled):not(.disabled):active:focus, .ars-btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .ars-btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(200, 123, 255, 0.5);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */
.ars-btn-primary:hover {
	color: #fff;
	background-color: #d55b9e;
	border-color: #d55b9e;
}


/* active時の色（hover時と同等かさらに濃いor暗めの色を指定） */
.ars-btn-primary:not(:disabled):not(.disabled):active, .ars-btn-primary:not(:disabled):not(.disabled).active,
.show > .ars-btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #d14b95;
  border-color: #d14b95;
}

/* 汎用ボタン */
/* 通常のボタン色 */
.ars-btn-special,
.ars-btn-special.disabled, .ars-btn-special:disabled {
	color: #000;
	padding:10px 30px 10px 30px;
	background-image:url("../img/button.png");
	background-size:100% 100%;
}

/* focusされた時の枠線の色 */

.ars-btn-special:focus, .ars-btn-special.focus,
.ars-btn-special:not(:disabled):not(.disabled):active:focus, .ars-btn-special:not(:disabled):not(.disabled).active:focus,
.show > .ars-btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0 rgba(200, 123, 255, 0.5);
}

/* hover時（マウスカーソルを重ねた時）の色（通常より濃いor暗めの色を指定） */

.ars-btn-special:hover {
	color: #000;
	text-decoration: none;
}

.ad_img:hover {
  opacity : 0.5;
  cursor: pointer;
}

.ad_txt:hover {
  text-decoration: underline;  
  cursor: pointer;
}


/* アカウント管理ボタン */
.account-btn, .account-unsubscribed-btn{
	color: #fff;
	background-color: rgb(0, 151, 167);
  border-color: rgba(0, 151, 167, 0);
  border-radius: 0.5em;
  font-size: 1.2em;
  margin: 0.5em;
  padding: 0.5em;
}

.account-unsubscribed-btn:disabled{
	color: #000000;
	background-color: rgb(217, 217, 217);
  border-color: rgba(0, 151, 167, 0);
  border-radius: 0.5em;
  font-size: 1.2em;
  margin: 0.5em;
  padding: 0.5em;
}

.account-btn:hover {
	color: #fff;
	background-color: rgb(255, 171, 64);
	border-color: rgba(255, 171, 64, 0);
  font-size: 1.2em;
  margin: 0.5em;
  padding: 0.5em;
}

.account-cancel-btn{
	color: #fff;
	background-color: rgb(102, 102, 102);
  border-color: rgba(102, 102, 102, 0);
  border-radius: 0.5em;
  font-size: 1.2em;
  margin: 0.5em;
  padding: 0.5em;
}