@charset "utf-8";

/* ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

【PC】ウィンドウ幅が769px以上の場合に適用するCSS

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */
@media print, screen and ( min-width:769px ) {



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

新規追加ページ

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


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

既存CSS削除

================================================================================== */
body .pane-contents .container {
display: block;
width: 100%;
}




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

common

================================================================================== */
#blog .inner {
min-width: 1000px;
max-width: 1200px;
margin: 0 auto;
width: calc(100% - 50px);
}
#blog .inner_mini {
min-width: 800px;
max-width: 900px;
margin: 0 auto;
width: calc(100% - 50px);
}

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

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

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



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

【共通】ボタン

================================================================================== */
[class*="btn_"] {
position: relative;
height: fit-content;
margin: 0 auto;
}
[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 {
min-width: 800px;
max-width: 1000px;
}
.btn_area .btn {
padding: 30px 0;
font-size: 2em;
display: block;
margin: 50px 0 0 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: 25px;
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: #f7e01a;
color: #4d3924;
}
.btn_01 .btn:before {
background: #FAD2BC;
}
.btn_02 .btn {
background: #f7e01a;
color: #4d3924;
}
.btn_02 .btn:before {
background: #FF6700;
}



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

【共通】半円

================================================================================== */
.en_bg {
position: absolute;
bottom: 0;
width: 100%;
height: 100px;
}
.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 {
position: relative;
}
.passage_area .title {
font-size: 4em;
font-weight: bold;
margin: 0;
}
.passage_area ul {
display: flex;
justify-content: center;
grid-gap: 430px;
padding: 100px 0 50px 0;
}
.passage_area li p {
font-size: 7em;
    margin: -20px 0 0 0;
}
.passage_area li p span {
    font-size: 0.5em;
}
.passage_area .bg_img {
    position: absolute;
    left: 50%;
    top: -50px;
    transform: translateX(-50%);
    z-index: -1;
    width: 970px;
}



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

overview_area

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

.overview_area .title {
text-align: center;
}

.overview_area dl {
display: flex;
flex-wrap: wrap;
border-top: 1px solid #eee;
margin: 70px 0 20px 0;
}
.overview_area dt,
.overview_area dd {
padding: 30px 10px;
border-bottom: 1px solid #eee;
}
.overview_area dt {
width: 20%;
font-weight: bold;
}
.overview_area dd {
width: 80%;
}



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

get_area

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

.get_area .title {
background: url() no-repeat scroll center center / 100% 100%;
text-align: center;
padding: 150px 0;
}



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

menu_area

================================================================================== */
.menu_area {
position: relative;
}
.menu_area .half_area .box {
padding: 80px 50px 450px 50px;
}
.menu_area .title {
margin: 0 0 50px 0;
}

.menu_area .text {
position: absolute;
bottom: 150px;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.menu_area .text p {
font-size: 1.6em;
font-weight: bold;
line-height: 1.8;
margin: 0 0 -10px 0;
}


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



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

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: 70px 0 100px 0;
}
.vote_area .text .title {
}
.vote_area .text p {
    background: #fff;
    padding: 15px 5%;
    border-radius: 10px;
    font-size: 3.3em;
    color: #3aa8cc;
    font-weight: bold;
    position: relative;
width: 60%;
    margin: 40px auto 0;
}
.vote_area .text p span {
font-size: 0.4em;
    display: block;
}
.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%);
}



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

charm_area

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

.charm_area li img {
width: 45%;
}

.charm_area .title_area {
padding: 50px 0;
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%;
padding-left: 25%;
}
.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%;
padding-right: 25%;
}

.charm_area ul {
margin: -50px 0 0 0;
background-image: url();
}
.charm_area li {
padding: 70px;
position: relative;
}
.charm_area .half_area ul li:first-child {
padding-top: 120px;
}
.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 {
position: absolute;
right: 0;
transform: translateX(50%);
top: 490px;
z-index: 3;
width: 70px;
}
.charm_area li:first-child .number {
top: 540px;
}

.charm_area li .title {
font-weight: bold;
font-size: 2.2em;
margin: 30px 0 20px;
}
.charm_area .half_area .box:nth-child(1) li .title {
/*text-align: right;*/
}
.charm_area .half_area .box:nth-child(2) li .title {
}

.charm_area .half_area li p {
    height: 150px;
    line-height: 1.8;
    font-size: 1.0rem;
}
.charm_area li .text {
    width: 45%;
    float: right;
}
.charm_area li .text_l {
    width: 45%;
    float: left;
    margin-right: 10%;
}
.charm_area h2 {
    text-align: center;
    margin: 0 auto;
    padding: 75px;
    font-size: 2.2rem;
    font-weight: 600;
    color: #202c5c;
}
/* ==================================================================================

colormasklist

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

.colormasklist li{
    list-style: none;
    display: inline-block;
    width: 30%;
}
.colormasklist img{
/*        width: 30%;*/
}
.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;
    padding: 40px;
    font-size: 1.6rem;
    font-weight: 600;
    color: #202c5c;
}

/* half_area
======================================== */
.half_area {
display: flex;
justify-content: center;
}
.charm_area .half_area .box:nth-child(1) li {
/*background: #f7ffce;*/
padding-left: 25%;
}
.charm_area .half_area .box:nth-child(2) li {
/*background: #f3ffb2;*/
padding-right: 25%;
}



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

sns_area

================================================================================== */
.sns_area {
text-align: center;
background: url(/img/campaign/mask/bg01.jpg) scroll repeat 0 0;
position: relative;
padding: 170px 0 120px 0;
}
.sns_area p {
color: #fff;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
line-height: 1.5;
margin: 20px 0 25px;
font-size: 1.8em;
}

.sns_area ul {
display: flex;
justify-content: center;
grid-gap: 40px;
margin: 40px 0 0 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 90px 0;
    background: url() scroll repeat 0 0;
}
.present_area .title {
    background: #fff;
    width: 1231px;
    margin: 0 auto;
    padding: 30px;
    font-size: 2.2rem;
    font-weight: 600;
    color: #202c5c;
}
.present_area p {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1.8;
    padding: 20px 20px;
    width: 1231px;
    margin: 0 auto;
    background: #fff;
    margin-bottom: 50px;
}
.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: 100px 0 170px 0;
position: relative;
margin: -40px 0 0 0;
z-index: 1;
}



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

mv_area

================================================================================== */
.mv_area {
text-align: center;
background: url(/img/campaign/mask/mv_bg.png) scroll no-repeat bottom center / auto 100%;
padding: 10vw 0;
z-index: 2;
position: relative;
    height: 630px;
}

.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;
}


}




@keyframes mvtext {
0% {
transform: rotate(0);
}
50% {
transform: rotate(-3deg);
}
100% {
transform: rotate(3deg);
}
}

@keyframes sns {
0% {
transform: translateY(0px);
}
10% {
transform: translateY(-10px);
}
20% {
transform: translateY(0px);
}
}

/* ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■

【PC】ウィンドウ幅が769px以上の場合に適用するCSS

■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ */