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

body{
	color: #111;
	line-height: 1.8em;
	font-family:"Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","游ゴシック Medium",YuGothic,YuGothicM,メイリオ,Meiryo,sans-serif;
	font-size: 14px;
	line-height: 1.8;
}
div{
	box-sizing: border-box;
}
.wrapper{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
.show_640{
	display:none!important;
}
.show_480{
	display:none!important;
}
.relative{
	position: relative;
}
.absolute{
	position: absolute;
}
.left{
	float: left;
}
.right{
	float: right;
}
.linkbtn{
	text-align: center;
	padding: 55px 0 70px;
}
.linkbtn a{
	display: block;
	text-decoration: none;
	color: #454545;
	line-height: 1;
	margin: 0 auto 20px;
	border: 1px solid #9b9b9b;
	border-radius: 5px;
	padding: 20px;
	text-align: center;
	width: 75%;
	max-width: 415px;
	box-shadow: 2px 2px #454545;
	background: #efefef;
	font-size: 18px;
}
#roop {
	width: 100%;
	height: 250px;
	background: url(/-/media/cojp/product/hsm/special/shishu-pro/img/long.jpg) repeat-x;
	background-position: 0 0;
	-webkit-animation: bgroop 50s linear infinite;
	animation: bgroop 50s linear infinite;
    background-size: cover;
    margin: 0 auto;
}
@-webkit-keyframes bgroop {
	from {
		background-position: 0  0;
	}
	to {
		background-position: -1970px 0;
	}
}
@keyframes bgroop {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -1970px 0;
	}
}
h2,h3,h1,div{
    box-sizing: border-box;
}
.pro11h1{
    padding: 45px 0;
    text-align: center;
    margin: 0;
}
.pro11h1 img{
    width: 315px;
    display: inline-block;
}
.sec1{
    margin: 80px 0 90px;
}
.sec1 .left{
    width: 55%;
}
.sec1 .left img{
    display: block;
    margin-bottom: 40px;
}
.sec1 .right{
    width: 42%;
}
.pro11h2 {
    font-weight: bold;
    color: #004898;
    padding-bottom: 5px;
    width: 100%;
    position: relative;
    border-bottom: 1px solid #555;
    margin-bottom: 15px;
    line-height: 1.5;
    padding-left: 25px;
    font-size: 18px;
    text-align: left;
}
.pro11h2::after {
    content: "";
    position: absolute;
    top: 7px;
    left: 5px;
    width: 12px;
    height: 12px;
    background: #004898;
    transform: rotate(45deg);
}
.bluearea{
    background: #E6EDF5;
    padding: 40px 0 70px;
}
.bluearea .center{
    text-align: center;
}
.bluearea .center img{
    max-width: 315px;
    display: block;
    margin: 0 auto 30px;
}
.pro11h3{
    background: #f43760;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    padding: 5px 30px 5px 10px;
    position: relative;
    margin: 0 0 15px;
    display: inline-block;
    width: auto;
}
.pro11h3::after{
    content: "";
    width: 30px;
    height: 100%;
    position: absolute;
    background: url(/-/media/cojp/product/hsm/special/shishu-pro/img/h3end.png) no-repeat;
    background-size: contain;
    background-position: right;
    top: 0;
    right: 0;
}
.block1,.block3{
    margin-bottom: 40px;
}
.block1 .left{
    width: 620px;
}
.block1 .left img{
    display: block;
    width: 300px;
    margin-right: 20px;
    float: left;
}
.block1 .left img:nth-child(even){
    margin-right: 0;
}
.block1 .right{
    width: 340px;
}
.imgdiv img{
    display: block;
    width: calc(25% - 15px);
    margin-right: 20px;
    float: left;
}
.imgdiv img:last-child{
    margin-right: 0;
}
.imgdiv{
    margin-bottom: 20px;
}
.block4 .right{
    width: 380px;
}
.block4 .left{
    width: 580px;
}
.sec3title{
    background: url(/-/media/cojp/product/hsm/special/shishu-pro/img/linegb.gif) repeat-x;
    background-position: center;
    text-align: center;
}
.sec3{
    margin-top: 90px;
}
.sec3center{
    text-align: center;
    margin: 20px 0 30px;
}
.sec3title img{
    width: 240px;
}
.sec3_1 .left{
    width: 580px;
    padding-right: 30px;
}
.sec3_1 .left img{
    margin-top: 30px;
}
.sec3_1 .right{
    width: 420px;
    border-left: 1px solid #555;
}
.sec3_1 .right .sec3pad{
    padding-left: 30px;
}
.sec3_1 .right .sec3pad:last-child{
    padding-top: 30px;
}
.sec3 .line{
    width: 100%;
    border-bottom: 1px solid #555;
    height: 0;
}
.sec3padimg1{
    width: 280px;
    display: block;
    margin: 10px auto 30px;
}
.sec3padimg2{
    width: 380px;
    margin: 20px 0 0 0;
    display: block;
}
.col3{
    margin-top: 60px;
}
.col3 .col{
    width: 290px;
    margin-right: 40px;
    float: left;
}
.col3 .col:first-child{
    width: 340px;
}
.col3 .col:last-child{
    margin-right: 0;
}
.sec3img3{
    width: 145px;
    margin: 20px auto 0;
    display: block;
}
.sec3img4{
    margin: 20px auto 0;
    display: block;
}
.sec3img5{
    margin: 20px auto 0;
    display: block;
    width: 200px;
}
.sendimg{
    border: 1px dashed #555;
    background: #EFEFEF;
    padding: 30px 40px;
    width: 100%;
    border-radius: 15px;
    margin-top: 70px;
}
.sendimg .left{
    width: 190px;
}
.sendimg .right{
    width: calc(100% - 230px);
}
.bluefont{
    font-weight: bold;
    color: #004898;
    font-size: 18px;
    margin-bottom: 15px;
    line-height: 1.5;
}
.linkbtn a{
    width: 300px;
    display: inline-block;
    box-sizing: border-box;
    margin: 0 10px;
}
.pro11h2 span{
    font-size: 12px;
    color: #111;
}
.blackmask{
	display: none;
	position: fixed;
	width: 100%;
	height: calc(100% + 65px);
	background-color: rgba(0,0,0,0.8);
	top: 0;
	left: 0;
	z-index: 10000;
}
.popup_wrapper{
	display: none;
	width: 60%;
	position: fixed;
	top: 30%;
	left:20%;
	z-index: 10001;
}
.popup_wrapper .close{
    display: block;
    width: 160px;
    border: 1px solid #aaa;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin: 30px auto 0;
    border-radius: 20px;
    color: #fff;
    background: #111;
    cursor: pointer;
}
.popup_wrapper .linkbtn{
    padding: 0;
}
@media screen and (max-width: 1200px) {
	.popup_wrapper {
	    width: 100%;
	    top: 30%;
	    left: 0;
	}
}
@media screen and (max-width: 1052px) {
	.show_640{
		display:block!important;
	}
	.hide_640{
		display:none;
	}
	.wrapper{
		padding: 0 20px;
	}
	.linkbtn {
		padding: 15px 0 70px;
	}
    .pro11h1 {
        padding: 25px 0;
    }
    .sec1 .left {
        width: 100%;
    }
    .sec1 .left img {
        margin-bottom: 25px;
        max-width: 420px;
        width: 100%;
    }
    .sec1 .right {
        width: 80%;
        max-width: 300px;
        margin-top: 20px;
    }
    .sec1 {
        margin: 40px 0 40px;
    }
    .pro11h1 {
        padding: 15px 0 30px;
    }
    #roop {
        height: 160px;
        animation: bgroop 100s linear infinite;
    }
    .pro11h1 img {
        width: 250px;
    }
    .bluearea .center img {
        max-width: 260px;
        margin: 0 auto 10px;
    }
    .bluearea .center {
        margin-bottom: 30px;
    }
    .pro11h3 {
        font-size: 14px;
        line-height: 1.5;
        padding: 2px 15px 3px 8px;
        margin: 0 0 10px;
    }
    .block1 .left {
        width: 100%;
    }
    .block1 .left img {
        width: calc(50% - 10px);
        max-width: 400px;
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .block1 .right {
        width: 100%;
    }
    .block1, .block3 {
        margin-bottom: 30px;
    }
    .imgdiv img {
        width: calc(50% - 10px);
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .imgdiv img:nth-child(even){
        margin-right: 0;
    }
    .imgdiv {
        margin-bottom: 0px;
    }
    .block4 .right {
        width: 100%;
        margin-top: 15px;
    }
    .block4 .right img{
        width: 100%;
        max-width: 400px;
        display: block;
        margin: 0 auto;
    }
    .bluearea {
        padding: 40px 0 40px;
    }
    .sec3 {
        margin-top: 55px;
    }
    .sec3center {
        margin: 15px 0 20px;
    }
    .sec3_1 .left {
        width: 100%;
        padding-right: 0;
        margin-bottom: 30px;
    }
    .sec3_1 .right {
        width: 100%;
        border-left: none;
        border-top: 1px solid #aaa;
        padding-top: 20px;
    }
    .sec3_1 .right .sec3pad {
        padding-left: 0;
    }
    .sec3 .line {
        border-bottom: 1px solid #aaa;
    }
    .sec3_1 .left img {
        display: block;
        max-width: 480px;
        margin: 20px auto 0;
        width: 100%;
    }
    .col3 {
        margin-top: 40px;
    }
    .col3 .col:first-child {
        width: 100%;
        margin-top: 0;
    }
    .col3 .col {
        width: 100%;
        margin-right: 0;
        float: left;
        margin-top: 30px;
    }
    .sec3img5 {
        margin: 0 0 0 30px;
        float: right;
    }
    .sec3img4 {
        margin: 0 auto 20px;
        display: block;
        max-width: 340px;
        width: 100%;
    }
    .hide_640{
        display: none!important;
    }
    .sec3img3 {
        margin: 0px 20px 0 0;
        float: left;
    }
    .sendimg {
        padding: 20px 25px;
        margin-top: 40px;
    }
    .sendimg .right {
        width: 100%;
    }
    .sendimg .right img {
        width: 180px;
        float: right;
        margin: 0 0 0 20px;
    }
    .linkbtn a {
        margin: 0 auto 20px;
    }
    .linkbtn {
        padding: 55px 0 55px;
    }
	.block4 .left {
	    width: 100%;
	}
}
@media screen and (max-width: 1052px) and (min-width: 769px) {
    .pro11h1 {
        padding: 45px 0;
    }
    .pro11h1 img {
        width: 315px;
    }
    #roop {
        height: 250px;
        animation: bgroop 50s linear infinite;
    }
    .sec1 .left {
        width: 55%;
    }
    .sec1 .right {
        width: 45%;
        max-width: none;
        margin-top: 0;
    }
    .block1 .left img {
        max-width: 100%;
    }
    .sec3padimg2 {
        margin: 20px auto 0;
    }
}
@media screen and (max-width: 480px) {
	.show_480{
		display: block;
	}
	.hide_480{
		display: none;
	}
	body{
		font-size: 13px;
	}
	.linkbtn a{
		font-size: 14px;
	}
    .sec1 .right {
        width: 100%;
        float: none;
        margin: 15px auto 0;
    }
    .sec1 .left {
        float: none;
    }
    .sec1 .left img {
        margin-bottom: 20px;
    }
    .sec1 {
        margin: 30px 0 40px;
    }
    .block1 .left img {
        width: 100%;
    }
    .imgdiv img {
        width: 100%;
        margin-right: 0;
    }
    .sec3title img {
        width: 200px;
    }
    .sec3 {
        margin-top: 40px;
    }
    .col3 .col {
        margin-top: 20px;
    }
    .sec3img3{
        width: 120px;
    }
    .sec3img5 {
        margin: 0 0 10px 15px;
        width: 160px;
    }
    .sendimg {
        margin-top: 25px;
    }
    .sendimg .right img {
        width: 120px;
        margin: 0 0 10px 15px;
    }
    .popup_wrapper {
        width: 100%;
        left: 0%;
    }
    .popup_wrapper .close{
        margin-top: 10px;
    }
    .pro11h1 {
        padding: 10px 0 25px;
    }
    .pro11h1 img{
        width: 200px;
    }
}