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

.sp{
	display: none;
}

.sp_header{
	display: none;
}

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

section {
    padding-left: 20px;
    padding-right: 20px;
}
#section2 {
    padding-left: 20px;
    padding-right: 20px;
}
}


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

header .catch img {
    width: 90%;
    height: 100%;
}

header nav a {
    color: #3b3b3b;
    position: relative;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 30px;
    font-weight: bold;
}


}

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


header {
    margin-top: 60px;
}


.outer_header {
    display: none !important;
}

.cont ul.article {
    flex-direction: column;
}

.cont ul.article li {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 12%;
}
	
.cont ul dt.pic1:after,
.cont ul dt.pic2:after,
.cont ul dt.pic3:after,
.cont ul dt.pic4:after,
.cont ul dt.pic5:after,
.cont ul dt.pic6:after,
.cont ul dt.pic7:after,
.cont ul dt.pic8:after,
.cont ul dt.pic10:after,
.cont ul dt.pic11:after,
.cont ul dt.pic12:after,
.cont ul dt.pic13:after,
.cont ul dt.pic14:after,
.cont ul dt.pic15:after,
.cont ul dt.pic16:after,
.cont ul dt.pic17:after,
.cont ul dt.pic18:after,
.cont ul dt.pic19:after,
.cont ul dt.pic20:after,
.cont ul dt.init1:after,
.cont ul dt.init2:after,
.cont ul dt.init4:after,
.cont ul dt.init5:after,
.cont ul dt.init6:after,
.cont ul dt.init7:after,
.cont ul dt.init8:after,
.cont ul dt.init9:after,
.cont ul dt.init10:after,
.cont ul dt.init11:after,
.cont ul dt.init12:after,
.cont ul dt.init13:after,
.cont ul dt.init14:after,
.cont ul dt.init15:after,
.cont ul dt.init16:after,
.cont ul dt.init17:after,
.cont ul dt.init18:after,
.cont ul dt.init19:after,
.cont ul dt.init20:after,
.cont ul dt.init21:after,
.cont ul dt.init22:after,
.cont ul dt.init23:after,
.cont ul dt.init24:after,
.cont ul dt.init25:after,
.cont ul dt.init26:after,
.cont ul dt.init27:after,
.cont ul dt.init28:after,
.cont ul dt.init29:after,
.cont ul dt.init30:after{
    /*background-size: 100%;*/
	left: 0;
	top: 0;
}
.cont ul dt.init3:after{
    background-size: 100%;
	left: 0;
	top: 0;
}

.cont ul.article.alt li {
    width: 100%;
}

.cont ul.menu {
    flex-wrap: wrap;
}

.cont ul.menu {
    flex-wrap: wrap;
    width: 100%;
}

.cont ul.menu li {
    margin-right: 3.5%;
    width: 31%;
    height: 100%;
    margin-top: 20px;
}

.cont ul.menu li:nth-child(3n) {
    margin-right: 0px;
}

.cont ul.menu li a {
    width: 50%;
    border-radius: 50%;
    padding: 50%;
	position: relative;
	height: initial;
}

.cont ul.menu li a span {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 4vw;
    width: 100%;
    height: 100%;
	left: 0;
	top: 0;
	
}

section {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 5%;
}
#section2 {
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 5%;
}

.cont ul dt {
    padding-top: 50%;
}

.pc{
	display: none;
}

.sp{
	display: block;

}

header .catch img {
    width: 100%;
	height: 100%;
}

header nav {
    display: none;
}

header .mv {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    padding-top: 73%;
    align-items: center;
}

header .catch {
    text-align: center;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 16%;
    width: 55%;
    left: 0px;
    right: 0px;
    margin-left: auto;
    margin-right: auto;
}


header .catch .yumin {
    font-size: 3.2vw;
}

header .catch .text {
    font-size: 3.2vw;
	margin-top: 10%;
    margin-left: -20%;
    margin-right: -20%;
}

section h2 {
    font-size: 6.3vw;
    line-height: 8.5vw;
}

.cont .fill {
    background-color: #162452;
    color: white;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.3vw;
    text-align: center;
    line-height: 1;
    padding: 1.2% 9%;
    margin-top: 8.3%;
    margin-bottom: 8.3%;
    justify-content: center;
    align-items: center;
}

.cont .category {
    max-width: initial;
    width: 30%;
}

.cont ul dt span {
    position: absolute;
    left: 0;
    top: 0;
    color: #162452;
    background-color: #eeeeee;
    padding: 2.5% 4%;
    font-size: 3.5vw;
    line-height: 1;
    z-index: 1;
    font-weight: bold;
}

.cont ul h3 {
    font-weight: bold;
    font-size: 4vw;
    color: #333333;
}

.cont ul dd {
    padding: 5% 7%;
    background-color: white;
}

header h1 {
    top: 6.2%;
    left: 4.3%;
	line-height: 0;
	display: none;
}

header h1 img {
    width: 30vw;
    height: auto;
}

.cont .about dl {
    flex-direction: column;
}

.cont .about dt {
    width: 90%;
    padding: 5%;
    position: relative;
    z-index: 1;
    margin-right: 0px;
    order: 2;
    background-color: white;
    margin-top: -15%;
}
.cont .about dd.pic {
    background-position: center center;
    background-size: cover;
    height: 100%;
    width: 100%;
    padding-top: 70%;
}

*::-ms-backdrop, .cont .new {
    max-width: 20%;
    padding-top: 10px;
}

*::-ms-backdrop, .cont .category {
    max-width: 100%;
    width: 30%;
}

*::-ms-backdrop, .cont .fill {
    background-color: #162452;
    color: white;
    display: flex;
    margin-left: auto;
    margin-right: auto;
    font-size: 3.3vw;
    text-align: center;
    line-height: 1;
    padding: 1.2% 5%;
    margin-top: 8.3%;
    justify-content: center;
    align-items: center;
}

.cont .about p {
    margin-top: 3%;
    font-size: 4vw;
}

a.common_btn {
    max-width: 150px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #162452;
    line-height: 1;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    transition: .3s;
    color: #162452;
    font-size: 3.5vw;
}

#banner li {
    margin-right: 8%;
}

#banner li a img {
    transition: .3s;
    width: 100%;
    height: 100%;
    vertical-align: bottom;
}

#banner ul {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 620px;
    margin-left: auto;
    padding-left: 20px;
    margin-right: auto;
    padding-right: 20px;
}

#banner {
    margin-top: 10%;
    height: auto;
    padding-top: 3%;
    padding-bottom: 3%;
}


/*side_menu------------------------*/

.menu_btn {
    position: fixed;
    z-index: 10;
    display: flex;
    top: 0px;
    right: 0px;
    flex-direction: column;
	transition: .3s ease-out;
	cursor: pointer;
}

.menu_btn.show {
    position: fixed;
    z-index: 10;
    display: flex;
    top: 15px;
    right: 20px;
    flex-direction: column;
}

.menu_btn .block {
    width: 60px;
    height: 60px;
    background-color: #162452;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.menu_btn .block span {
    display: block;
    margin-bottom: 9px;
    width: 26px;
    height: 2px;
    background-color: #ffffff;
    position: relative;
}

.menu_btn .block span:before{
	content: "";
	width: 1px;
	height: 1px;
	left: 0;
	background-color: white;
	position: absolute;
}

.menu_btn .block span:after{
	content: "";
	width: 1px;
	height: 1px;
	right: 0;
	background-color: white;
	position: absolute;
	transition: .3s;
}

.menu_btn .block.on span:after{
	width: 100%;
}

.menu_btn .block span:last-child{
	margin-bottom: 0px;
}

.menu_btn span.txt {
	font-family: "lusitana";
    font-size: 0.8em;
	text-align: center;
}


img.menu_logo {
    position: fixed;
    width: 120px;
    height: auto;
    top: 17.31px;
    left: 15px;
    z-index: 1000;
    opacity: 0;
    transition: .7s;
    line-height: 2.0;
}


img.menu_logo.on {
    position: fixed;
    width: 120px;
    height: auto;
    top: 17.31px;
    left: 15px;
    z-index: 1000;
    opacity: 1;
    transition: .7s;
    line-height: 2.0;
}

.side_menu {
    position: fixed;
    z-index: 100;
    width: 320px;
    background-color: #fff;
    height: 100vh;
    right: -320px;
    top: 60px;
	transition: .4s ease-in;
	display: flex;

}

.side_menu.active {
    position: fixed;
    z-index: 100;
    width: 100%;
    background-color: #fff;
    height: 100vh;
    right: 0px;
    top: 60px;
    transition: .4s ease-in;
    display: flex;
    flex-direction: column;
}

.side_menu:before{
	content: "";
	position: fixed;
	width: 0px;
	background-color: #ffffff;
	height: 100vh;
	transition-delay: .3s;
	transition: .6s;
    right: -320px;
    opacity: 0;
}

.side_menu.active:before {
    content: "";
    position: fixed;
    width: 100%;
    background-color: #ffffff;
    height: 100vh;
    transition-delay: .3s;
    border-right: 1px solid #ebf6ff;
    right: 0;
    opacity: 1;
}

.side_menu ul{
	position: relative;
	opacity: 0;
	z-index: 150;
	transition: .5s;
	width: 100%;
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    overflow: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.side_menu.active ul {
    position: relative;
    opacity: 1;
    z-index: 150;
    transition: .5s;
    width: 100%;
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    text-align: left;
    padding-left: 20px;
    padding-right: 20px;
    overflow: auto;
    padding-top: 30px;
    padding-bottom: 30px;
}

.side_menu ul img {
    width: 210px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
    text-align: center;
}

.side_menu ul li {
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}

.side_menu ul li.logo {
    position: relative;
    width: 100%;
    margin-bottom: 50px;
}

.side_menu ul li.logo:after {
    display: none;
}

.side_menu ul li a {
    color: #434343;
    font-weight: bold;
    transition: .3s;
    padding-bottom: 10px;
    border-bottom: 1px solid #eaeaea;
    width: 100%;
    display: block;
}

.side_menu ul li a:hover{
    transition: .3s;
    opacity: 0.7;
}

.side_menu ul.sub_menu2 {
    margin-top: 10px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
    display: none;
    transition: auto;
}

.side_menu ul.sub_menu2 li {
    margin-bottom: 10px;
    width: 100%;
}

.side_menu ul.sub_menu2 li a {
    border-bottom: 1px dotted #eaeaea;
    padding-left: 25px;
}

.fa-plus:before {
    content: "\f054";
    position: absolute;
    right: 0;
    top: 6px;
    transition: .3s;
}

.fa-plus.on:before{
    opacity: 0;
}

.fa-minus:before {
    content: "\f054";
    position: absolute;
    right: 0;
    top: 6px;
    transition: .3s;
    opacity: 0;
}

.fa-minus.on:before {
    opacity: 1;

}

.fa-chevron-right:before {
    content: "\f054";
    position: absolute;
    right: 0;
    top: 6px;
    transition: .3s;
}

.fa-chevron-right.on:before {
    content: "\f054";
    transform: rotate(90deg);
}

.sub_menu2 .fa-chevron-right:before {
    content: "\f054";
    position: absolute;
    right: 0;
    top: 8px;
    left: 0;
    font-size: 5px;
}

.close {
    top: 0px;
    right: 0px;
    position: absolute;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    z-index: 200;
    opacity: 0;
    transition: .3s;
}

.close.active {
    opacity: 1;
}

.close .block {
    width: 60px;
    height: 60px;
    display: block;
    background-color: #162452;
}

.close .block span {
    content: "";
    width: 30px;
    height: 2px;
    transform: rotate(45deg);
    background-color: #ffffff;
    position: absolute;
    left: 15px;
    top: 30px;
}


.close .block span:last-child {
    width: 30px;
    height: 2px;
    transform: rotate(-45deg);
    background-color: #ffffff;
    position: absolute;
    left: 15px;
    top: 30px;
}

.close .block span:first-child:before {
    content: "";
	width: 1px;
    height: 1px;
    transform: rotate(0deg);
    background-color: #fff;
    position: absolute;
    left: 0px;
    top: 0px;
	transition: .3s;
}

.close .block span:first-child:after {
    content: "";
	width: 1px;
    height: 1px;
    transform: rotate(0deg);
    background-color: #fff;
    position: absolute;
    right: 0px;
    top: 0px;
	transition: .3s;
}

.close.on .block span:first-child:before {
    content: "";
	width: 18px;
    height: 1px;
    transform: rotate(0deg);
    background-color: #fff;
    position: absolute;
    left: 0px;
    top: 0px;
}

.close .block span:last-child:before {
    content: "";
    width: 1px;
    height: 1px;
    transform: rotate(0deg);
    background-color: #fff;
    position: absolute;
    left: 0px;
    bottom: 0px;
    transition: .3s;
}

.close.on .block span:last-child:before {
    content: "";
	width: 18px;
    height: 1px;
    transform: rotate(0deg);
    background-color: #fff;
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.close .block span:last-child:after {
    content: "";
    width: 1px;
    height: 1px;
    transform: rotate(0deg);
    background-color: #fff;
    position: absolute;
    right: 0px;
    bottom: 0px;
    transition: .3s;
}



.close span.txt {
    font-family: "lusitana";
    font-size: 0.8em;
    text-align: center;
	color: black;
}


p.catch {
    font-size: 3vw;
    top: 6%;
}

.lds-ellipsis {
    top: 6%;
}

.sp_header {
    display: block;
    position: fixed;
    height: 60px;
    background-color: white;
    width: 100%;
    z-index: 9;
    transition: .3s;
    top: 0;
}

.sp_header img {
    width: 120px;
    height: 100%;
    position: absolute;
    left: 15px;
	transition: .3s;
}

.sp_header img.black {
	opacity: 1;	
}

.sp_header.on {
	background-color: white;
}

.sp_header.on img.white {
	opacity: 0;	
}

p.gotop {
    display: none;
}

.cont#init_about {
    padding-left: 0px;
    padding-right: 0px;
}

.outer.left_bg:before {
    content: "";
    position: absolute;
    top: 300px;
    background: url(../image/pat1.gif) repeat;
    width: 80%;
    height: 86%;
    z-index: -1;
    left: 0px;
    display: block;
    right: auto;
}
#sub .outer.right_bg:before,
.outer.right_bg:before {
    content: "";
    position: absolute;
    top: 300px;
    background: url(../image/pat1.gif) repeat;
    width: 80%;
    height: 93%;
    z-index: -1;
    right: 0px;
    display: block;
    left: auto;
}

.cont .about {
    margin-top: 15%;
}

.cont ul dd i {
    font-size: 3vw;
}

.cont ul dd i:before {
    content: "";
    width: 42px;
    position: absolute;
    height: 1px;
    background-color: #162452;
    top: 50%;
    left: 120%;
    transition: .3s;
}

*::-ms-backdrop, .lds-logo .text{

}


#sub header .mv {
    padding-top: 0;
}

#sub header .mv .mv_cont {
    display: flex;
    height: auto;
    width: 100%;
    max-width: auto;
    margin-top: 0px;
}

.mv_cont dl {
    flex-direction: column;
}

.mv_cont.sub_about dt,
.mv_cont.sub_product dt,
.mv_cont.sub_initiative dt{
    padding-top: 35%;
}

.mv_cont dt {
    width: 100%;
}

.mv_cont dd {
    width: 95%;
    background-color: white;
    padding: 4% 4.5%;
    margin: 0 auto;
    margin-top: -4%;
}

.mv_cont h2 span {
    margin-top: 0px;
}

.mv_cont h2 {
    font-size: 7.45vw;
    line-height: 8vw;
}

.about_intro h3 {
    font-size: 5.2vw;
}

*::-ms-backdrop, .about_intro h3 {
    font-size: 5.3vw;
}

.about_intro p {
    font-size: 3.7vw;
    text-align: left;
}

.about_echo a.common_btn,
.about_pict a.common_btn{
    max-width: 100%;
    margin-top: 4%;
}

.about_intro p {
    margin-top: 6%;
}

.pc{
    display: none !important;
}

.about_echo ul {
    flex-direction: column;
}

.about_echo li:last-child {
    margin-left: 0;
}

.about_echo li {
    background-color: white;
    width: 100%;
    margin-bottom: 20px;
}

.about_echo ul {
    margin-bottom: 0;
}

.about_echo h4 {
    font-size: 4.8vw;
}

.about_echo p {
    font-size: 3.5vw;
}

.about_echo dt span {
    font-size: 5.4vw;
}

.about_pict li {
    width: 100%;
    margin-right: 0;
    margin-top: 20px
}

.about_pict p.achive {
    font-size: 3.7vw;
}

.about_pict p.mark {
    font-size: 3.7vw;
}

a.common_btn.right_mark:after {
    top: 42%;
}

#sub .footer {
    margin-top: 10%;
}

.product_detail .content.row {
    flex-direction: column;
}

.product_detail .content.row img,
.product_detail .content.row img.small{
    max-width: 100%;
}

.product_detail .content.row p {
    margin-left: 0px;
}

.product_detail .content.row img.left,
.product_detail .content.row img.right{
    margin-left: 0px;
    margin-right: 0px;
}

#section2 .frame_g {
    display: block!important;
    border: 1px solid #cccccc;
    width: 100%;
    height: auto;
	padding: 10px;
    margin: 10px 0;
}
#section2 .frame_g .tbl_h th,
#section2 .frame_g .tbl_h td {
	display: block;
	width: 100%;
	text-align: center;
}
#section2 .content2 img.exactly {
/*    max-width: 230px;*/
    height: 100%;
	text-align: center;
}
#section2 .frame_g .title {
	font-size: 1.3em;
	line-height: 1.4em;
}
#section2 .frame_g .tit_sub {
	font-size: 1.1em;
	line-height: 1.2em;
	margin-top: 20px;
}

#section2 .content2{
    display: block;
}
#section2 .f_left {
	float: none;
	margin-right: 0;
}
#section2 .f_right {
	float: none;
	margin-left: 0;
}
#section2 img.noline {
    width: 100%;
	border: none;
	margin-top: 30px;
    text-align: center;
}
#section2 .f_txt_l {
    text-align: left;
    margin-top: 10px;
}

}

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

p.catch {
    font-size: 5vw;

}



}

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

.cont ul dd i:before {
    content: "";
    width: 42px;
    position: absolute;
    height: 1px;
    background-color: #162452;
    top: 50%;
    left: 120%;
    transition: .3s;
}

.cont ul dd i {
    position: absolute;
    bottom: 10px;
    right: 5%;
    font-size: 0.8em;
    color: #162452;
    transition: .3s;
}

}