#index.cmovout .campbw0 { -webkit-transform: translateX(-150%); -moz-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; opacity: 1; }
#index .show1fin .campbw0 { -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s; opacity: 1; }
#index .campbw0 { opacity: 0; position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 7077; }
#index .campbw0 .secin { background-color: #FBE6EF; box-sizing: border-box; width: 98%; max-width: 860px; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); z-index: 7078; }
#index .campbw0 .secin a { display: block; width: 100%; height: 100%; position: relative; }
#index .campbw0 .secin img { display: block; vertical-align: bottom; width: 100%; }
#index .campbw0 .secin .cbtn { width: 40px; height: 40px; position: absolute; right: -10px; top: -10px; z-index: 7079; background-color: #000; border: 1px solid #FFFFFF; border-radius: 50%; -moz-border-radius: 50%; -webkit-border-radius: 50%; -o-border-radius: 50%; -ms-border-radius: 50%; }
#index .campbw0 .secin .cbtn p { font-size: 30px; text-align: center; line-height: 40px; font-weight: 700; }
#index .campbw0 .secin .abtn1 { margin-top: 20px; box-sizing: border-box; width: 100%; max-width: 360px; background-color: #E85298; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; margin-left: auto; margin-right: auto; margin-bottom: 40px; }

#index section.mainimg .secin .mimgc img {
	display: block;
	vertical-align: bottom;
	width: 100%;
	position: relative;
	top: 40px;
}


section.sec1 .flex_area{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
section.sec1 .flex_area .top_blog_link{
	width: calc(90%/2);
}

@media screen and (max-width: 768px) {
	section.sec1 .flex_area{
		display: block;
	}
	section.sec1 .flex_area .top_blog_link{
		width: 100%;
	}
}


section.sec1 .secin .cpnl2 {
	text-align: center;
	font-size: 0;
	width: 100%;
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 60px;
}

section.sec1 .secin .cpnl2 .s3{
	width: 48%;
	margin-left: 1%;
	margin-right: 1%;
	display: inline-block;
	position: relative;
}
section.sec1 .secin .cpnl2 .s3 p.note{
	position: absolute;
	bottom: 3px;
	right: 5px;
	color: #fff;
}

section.sec1 .secin .cpnl2 .s3 img{
	width: 100%;
}

#index section.sec1 .secin .cpnl li .ctit p.note{
	position: absolute;
	bottom: 3px;
	right: 5px;
	color: #000;
    z-index: 1;
}


@media screen and (max-width: 584px) { #index .campbw0 .secin .abtn1 { max-width: 300px; } }
#index .campbw0 .secin .abtn1:hover { opacity: 0.7; }
#index .campbw0 .secin .abtn1 a { display: block; width: 100%; height: 100%; position: relative; line-height: 1em; padding-top: 10px; padding-bottom: 10px; }
@media screen and (max-width: 584px) { #index .campbw0 .secin .abtn1 a { padding-top: 10px; padding-bottom: 10px; } }
#index .campbw0 .secin .abtn1 a p { color: #ffffff; font-size: 16px; text-align: center; }
@media screen and (max-width: 584px) { #index .campbw0 .secin .abtn1 a p { font-size: 14px; } }
#index .campbw0 .secin .abtn1 a span { font-size: 14px; line-height: 1.5em; margin-top: 10px; display: block; }
#index .campbw0 .secin .abtn1:hover { opacity: 0.7; }
#index .campbw0 .secin .abtn1:hover a::after { right: 0px; }
#index .mainimg .secin .secpb {
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	top: 15px;
	text-shadow:0px 0px 0px #ffffff,-2px -2px 5px #ffffff,2px 2px 5px #ffffff,-7px 0px 5px #ffffff,7px 0px 5px #ffffff;
}
#index .mainimg .secin .secpb::after { position: absolute; display: block; content: ""; width: 1px; height: 100%; background-color: #000; -webkit-transform: rotate(17.62deg); transform: rotate(17.62deg); right: 15%; top: 1px; -webkit-transform-origin: right top; transform-origin: right top; }
@media screen and (max-width: 584px) { #index .mainimg .secin .secpb::after { right: 1%; } }
#index .mainimg .secin .secpb::before { position: absolute; display: block; content: ""; width: 1px; height: 100%; background-color: #000; -webkit-transform: rotate(-17.62deg); transform: rotate(-17.62deg); left: 20%; top: 0; -webkit-transform-origin: left bottom; transform-origin: left bottom; }
@media screen and (max-width: 584px) { #index .mainimg .secin .secpb::before { left: 8%; } }
@media screen and (max-width: 584px) {
	#index .mainimg .secin .secpb {
		font-size: 13px;
		line-height: 1.7em;
		position: relative;
		top: -18px;
	}
	#index section.mainimg .secin .mimgc img {
		position: relative;
		top: -58px;
	}
	section.sec1 .secin .cpnl2 {
		width: 100%;
		margin-bottom: 20px;
	}
	section.sec1 .secin .cpnl2 .s3 {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 20px;
	}

}









#index section.mainimg .secin .mimgc {
    width: 100%;
    max-width: none;
    margin-bottom: 20px;
    margin-top: 140px;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 0 40px;
    background-color: rgba(255, 255, 255, .6);
}
#index section.mainimg .secin .mimgc img {
    display: block;
    vertical-align: bottom;
    width: 100%;
    max-width: 540px;
    position: static;
    margin: 0 auto;
}

#index section.sec1{
	background-color: #fff;
}

#index section.mainimg{
	/*height: 100vh;*/
}
#index section.mainimg::after{
	-webkit-transition: 0.3s;
	-moz-transition: 0.3s;
	-o-transition: 0.3s;
	transition: 0.3s;
	position: fixed;
    z-index: 0;
    top: 110px;
    height: 85%;
}

@media screen and (min-width: 585px){
	#index.posfix section.mainimg::after{
	    top: 42px;
	}
}

@media screen and (max-width: 584px){

	#index section.mainimg .secin .mimgc {
	    width: 100%;
	    margin-left: auto;
	    margin-right: auto;
	    margin-top: 130px;
	    margin-bottom: 50px;
	    padding: 20px 0 20px;
	}
	#index section.mainimg .secin .mimgc img {
	    max-width: 320px;
	}

	#index section.mainimg::after {
	    top: 58px;
	    /*height: 80%;*/
	    height: 140vw;
	}
}


.top_blog_link{
	display: block;
	width: 100%;
	max-width: 940px;
	margin: 0 auto 60px;
}
.top_blog_link img{
	width: 100%;
}
@media screen and (max-width: 584px){
	.top_blog_link{
		margin: 0 auto 20px;
	}
}