@charset "utf-8";

/* 【SP】ウィンドウ幅が768px以下の場合に適用するCSS */
@media screen and (max-width: 768px) {


/* ★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★

新規追加ページ

★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★　★ */


/* ==================================================================================

common

================================================================================== */
#blog {
font-size: 15px;
line-height: 1.6;
}
#blog .inner,
#blog .inner_mini {
padding: 0 5%;
}

#blog .sec {
margin: 30px 0;
}

#blog a:hover {
text-decoration: none;
}

#blog .bg {
background: var(--bg-color);
}

#blog img {
width: 100%;
vertical-align: bottom;
}

#blog .pc {
display: none;
}
#blog h2 {
background: unset;
}


/* ==================================================================================

【共通】ボタン

================================================================================== */
[class*="btn_"] {
position: relative;
height: fit-content;
display: inline-block;
}
[class*="btn_"] .btn:after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform-origin: left top;
transform: scale(0, 1);
transition: transform 0.3s;
}
[class*="btn_"] .btn:hover:after {
transform-origin: right top;
transform: scale(1, 1);
}

[class*="btn_"] .btn {
padding: 20px 0;
color: #7d7d7d;
border-radius: 5px;
overflow: hidden;
position: relative;
}
[class*="btn_"] .btn span {
position: relative;
z-index: 1;
}
img {
vertical-align: bottom;
}



/* ==================================================================================

【共通】ボタン

================================================================================== */
.btn_area {
    width: 100%;
    padding: 0 5%;
    box-sizing: border-box;
}
.btn_area .btn {
padding: 10px 0;
font-size: 1.3em;
display: block;
margin: 20px 0;
position: relative;
transition: 0.3s;
border-radius: 100px;
font-weight: bold;
}
.btn_area .btn img {
position: absolute;
right: 6.5%;
top: 50%;
transform: translateY(-50%);
width: 17px !important;
transition: all 300ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.btn_area .btn:hover img {
right: 6%;
}

.btn_area .btn:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
transform-origin: right top;
transform: scale(0, 1);
transition: transform 0.3s;
background: #FAD2BC;
}
.btn_area .btn:hover:before {
transform-origin: left top;
transform: scale(1, 1);
}
.btn_area .btn span {
position: relative;
z-index: 1;
}

.btn_01 .btn {
background: #fff350;
color: #60638c;
}
.btn_01 .btn:before {
background: #FAD2BC;
}
.btn_02 .btn {
background: #fff350;
color: #fff;
}
.btn_02 .btn:before {
background: #FF6700;
}



/* ==================================================================================

【共通】半円

================================================================================== */
.en_bg {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
}
.en_bg img {
width: 100%;
height: 100%;
}
.en_bg.re {
position: absolute;
top: 0;
transform: rotate(-180deg);
}



/* ==================================================================================

【共通】半分背景

================================================================================== */
.half_bg {
position: relative;
}
.half_bg:before,
.half_bg:after {
content: "";
position: absolute;
width: 50%;
height: 100%;
z-index: 1;
top: 0;
}
.half_bg:before {
background: #f7ffce;
left: 0;
}
.half_bg:after {
background: #f3ffb2;
right: 0;
}





/* ==================================================================================

途中経過

================================================================================== */
.passage_area {
}
.passage_area .title {
font-size: 4em;
font-weight: bold;
margin: 0;
}
.passage_area ul {
display: flex;
justify-content: center;
grid-gap: 30px;
    padding: 40px 0 0 0;
}
.passage_area li p {
font-size: 4em;
margin: -10px 0 0 0;
}
.passage_area li p span {
font-size: 0.5em;
}
.passage_area .bg_img {
width: 110%;
    margin: -100px -5% -40px;
position: relative;
z-index: -1;
overflow: hidden;
height: 40vh;
}
.passage_area .bg_img img {
width: auto !important;
/*height: 75vh;*/
position: absolute;
left: 50%;
top: 0;
transform: translateX(-50%);
}



/* ==================================================================================

overview_area

================================================================================== */
.overview_area {
padding: 20px 0;
}

.overview_area .title {
text-align: center;
padding: 0 15%;
}

.overview_area dl {
margin: 30px 0 0 0;
}
.overview_area dt,
.overview_area dd {
padding: 15px 5px;
}
.overview_area dt {
font-weight: bold;
border-bottom: 1px solid #eee;
}
.overview_area dd {
}



/* ==================================================================================

get_area

================================================================================== */
.get_area {
margin: 0 0 30px 0;
z-index: 1;
position: relative;
}

.get_area .title {
background: url(/img/campaign/aojiru/get_bg.png) no-repeat scroll center center / 100% 100%;
text-align: center;
padding: 50px 5%;
}



/* ==================================================================================

menu_area

================================================================================== */
.menu_area {
}
.menu_area .half_area .box {
    padding: 30px 5%;
}
.menu_area .title {
margin: 0 0 30px 0;
    padding: 0 10%;
}

.menu_area .text {
text-align: center;
padding: 30px 5% 10px;
}
.menu_area .text p {
font-size: 1.2em;
    font-weight: bold;
    line-height: 1.6;
}


/* half_area
======================================== */
.menu_area .half_area .box:nth-child(1) {
background: #f7ffce;
}
.menu_area .half_area .box:nth-child(2) {
background: #f3ffb2;
}


/* ==================================================================================

vote_area

================================================================================== */
.vote_area {
text-align: center;
}

.vote_area .img {}
.vote_area .img ul {
display: flex
}
.vote_area .img ul li {
width: 100%;
}

.vote_area .text {
background: url(/img/campaign/mask/bg01.jpg) repeat scroll 0 0;
padding: 30px 5% 20px;
}
.vote_area .text .title {
}
.vote_area .text p {
background: #fff;
    padding: 15px 5%;
    border-radius: 10px;
    margin: 20px 0;
	 font-size: 1.3em;
	 color: #3aa8cc;
	 font-weight: bold;
	 position: relative;
}
.vote_area .text p span {
    font-size: 0.8em;
    line-height: 1.3;
    display: block;
    margin: 5px 0 0 0;
}
.vote_area .text p:before {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 15px 0 15px;
    border-color: #ffffff transparent transparent transparent;
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
}

.vote_area .btn_area,
.menu_area .btn_area {
padding: 0;
}



/* ==================================================================================

charm_area

================================================================================== */
.charm_area {
margin: -50px 0 0 0;
position: relative;
}

.charm_area li img {
width: 100%;
}

.charm_area .title_area {
padding: 30px 15%;
    text-align: center;
    z-index: 2;
    position: relative;
}
.charm_area .half_area .box:nth-child(1) .title_area {
background: url(/img/campaign/aojiru/charm_title_bg_01.png) no-repeat scroll center center / 100% 100%;
}
.charm_area .half_area .box:nth-child(2) .title_area {
background: url(/img/campaign/aojiru/charm_title_bg_02.png) no-repeat scroll center center / 100% 100%;
    margin: -20px 0 0 0;
}

.charm_area ul {
margin: -20px 0 0 0;
}
.charm_area li {
padding: 30px 5%;
position: relative;
}
.charm_area .half_area ul li:first-child {
padding-top: 50px;
}
.charm_area .half_area ul li:last-child {
padding-bottom: 50px;
}
.charm_area .half_area .box:nth-child(1) li:nth-child(even) {
background: #f9ffdd;
}
.charm_area .half_area .box:nth-child(2) li:nth-child(even) {
background: #f7ffc9;
}

.charm_area .half_area .box {
width: 100%;
}
.charm_area .half_area .box:nth-child(1) {
z-index: 3;
}
.charm_area .half_area .box:nth-child(2) {
z-index: 1;
}

.charm_area li .number {
display: none;
}

.charm_area li .title {
font-weight: bold;
font-size: 1.4em;
margin: 20px 0;
}
.charm_area .half_area .box:nth-child(1) li .title {
}
.charm_area .half_area .box:nth-child(2) li .title {
}

.charm_area .half_area li p {
line-height: 1.8;
}
.charm_area h2 {
    text-align: center;
    margin: 0 auto;
    font-size: 1.8rem;
    font-weight: 600;
    color: #202c5cflowerblue;
    margin-top: 50px;
}

/* half_area
======================================== */
.half_area {
}
.charm_area .half_area .box:nth-child(1) li {
background: #f7ffce;
}
.charm_area .half_area .box:nth-child(2) li {
background: #f3ffb2;
}

/* ==================================================================================

colormasklist

================================================================================== */
.colormasklist ul{
    text-align: center;
}

.colormasklist li{
    list-style: none;
    display: inline-block;
        width: 46%!important;
}

.colormasklist h2{
    text-align: center;
    margin: 0 auto;
    padding: 40px;
    font-size: 2.2rem;
    font-weight: 600;
    color: #202c5c;
}
.colormasklist h3{
    text-align: center;
    margin: 0 auto;
    font-size: 0.6rem;
    font-weight: 600;
    color: #202c5c;
}
/* ==================================================================================

sns_area

================================================================================== */
.sns_area {
text-align: center;
background: url(/img/campaign/mask/bg01.jpg) scroll repeat 0 0;
position: relative;
padding: 60px 0;
}
.sns_area .img {
padding: 0 5%;
}
.sns_area p {
color: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
line-height: 1.5;
    margin: 15px 0;
    font-size: 1.2em;
}
.sns_area .img img:last-child {
width: 60% !important;
}

.sns_area ul {
display: flex;
justify-content: center;
grid-gap: 5px;
margin: 25px 0 10px 0;
}
.sns_area ul li {
animation: sns 2s ease 0s infinite alternate none running;
position: relative;
transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.sns_area ul li:nth-child(1) {
animation-delay: 0.5s;
}
.sns_area ul li:nth-child(2) {
animation-delay: 1s;
}
.sns_area ul li:nth-child(3) {
animation-delay: 1.5s;
}
.sns_area ul li:nth-child(4) {
animation-delay: 2s;
}

.sns_area ul a {
transition: all 500ms cubic-bezier(0.215,0.610,0.355,1.000);
}
.sns_area ul a:hover {
opacity: 0.7;
transform: scale(1.1);
display: inline-block;
}



/* ==================================================================================

present_area

================================================================================== */
.present_area {
text-align: center;
margin: 0 0 20px 0;
    padding: 10px 5%;
}
.present_area .title {
padding: 0 5%;
    padding: 0 5%;
    font-size: 1.4;
    font-weight: 600;
    color: #202c5c;
}
.present_area p {
    font-size: 1.1em;
    line-height: 1.6;
    margin: 30px 0;
    text-align: left;
}
.present_area p span {
font-size: 0.7em;
}



/* ==================================================================================

web_area

================================================================================== */
.web_area {
text-align: center;
background: url(/img/campaign/mask/bg01.jpg) scroll repeat 0 0;
padding: 40px 0 50px;
position: relative;
margin: -20px 0 0 0;
z-index: 1;
}
.web_area .text {
padding: 0 5%;
}



/* ==================================================================================

mv_area

================================================================================== */
.mv_area {
text-align: center;
background: url(/img/campaign/mask/mv_bg.png) scroll no-repeat bottom center / cover;
padding: 40px 5%;
z-index: 2;
position: relative;
    height: 220px;
}

.mv_area img {
animation: mvtext 5s ease 0s infinite alternate none running;
}


/* ==================================================================================

ふわっとスライド表示

================================================================================== */
/*.move {transform : translate(0, 50px);}*/

[class*="move"] {
/*opacity: 0;*/
}
[class*="_on"] {
transition: all 1000ms cubic-bezier(0.215,0.610,0.355,1.000);
transform : translate(0, 0);
opacity: 1;
}



}
/* 【SP】ウィンドウ幅が768px以下の場合に適用するCSS */