html {
font-size:62.5%;
}
body{
font-size:1.4rem;
}
.header_menu{
background:rgba(255,255,255,1);
border-bottom:#294084 10px solid;
}
ul.h_menu{
padding:0 20px 0 0;
margin-top:13px;
}
ul.h_menu li a{
color:#294084;
font-weight:normal;
}
ul.h_menu li a:hover{
color:#1c91ce;
}
.logo{
margin:11px 0 0 20px;
}
h2.kaisei_title{
font-family: 'Oswald', sans-serif;
letter-spacing:5px;
font-size:1.6rem;
text-align:center;
max-width:150px;
position:relative;
top:100px;
}
h2.kaisei_title div{
letter-spacing:1px;
font-size:2.5rem;
color:#1c91ce;
}
h2.kaisei_title:before{
content:"";
display:block;
border-left:5px solid #294084;
height:30px;
position:absolute;
top:-50px;
left:calc(50% - 3px);
}
h2.kaisei_title2{
font-family: 'Oswald', sans-serif;
letter-spacing:5px;
font-size:1.6rem;
text-align:center;
position:relative;
top:100px;
padding:0 0 100px 0;
}
h2.kaisei_title2 div{
letter-spacing:1px;
font-size:2.5rem;
color:#1c91ce;
}
h2.kaisei_title2:before{
content:"";
display:block;
border-left:5px solid #294084;
height:30px;
position:absolute;
top:-50px;
left:calc(50% - 3px);
}
h2.kaisei_title_w{
font-family: 'Oswald', sans-serif;
letter-spacing:5px;
font-size:1.6rem;
text-align:center;
position:relative;
top:60px;
padding:0 0 60px 0;
color:#ffffff;
}
h2.kaisei_title_w div{
letter-spacing:1px;
font-size:2.5rem;
color:#ffffff;
}
h2.kaisei_title_w:before{
content:"";
display:block;
border-left:5px solid #ffffff;
height:30px;
position:absolute;
top:-50px;
left:calc(50% - 3px);
}
.bg1,
.bg2,
.bg3,
.bg4,
.bg5{
display:none;
}
.htmls h1,
.contact_other_page h1,
.news h1,
.event h1{
display:none;
}
.htmls,
.contact_other_page,
.news,
.event{
padding-top:80px;
}
.triangle{
display:none;
}
.pcnone{
display:none;
}
/*-------------------------top_img-----------------------*/
.top_img_pc img{
max-width:100%;
}
.top_img_sp img{
max-width:100%;
}
.top_img_sp{
display:none;
}
/*-------------news-------------*/
.top_blog{
padding-bottom:0;
}
.top_blog .w_area{
position:relative;
}
.top_blog h1{
display:none;
}
.top_blog_column .top_blog_img,
.top_blog_column .top_blog_detail,
.top_blog_column .blog_readmore{
display:none;
}
.top_blog_column{
display:block;
width:calc( 80% - 300px);
/*padding:0 0 0 300px;*/
margin:0 0 0 300px;
position:relative;
top:-100px;
border-bottom:1px solid #c5c5c5;
}
.top_blog_column .blog_date{
position:relative;
top:-25px;
color:#c5c5c5;
}
.top_blog_readmore_add{
position:absolute;
right:0;
bottom:80px;
}
.top_blog_readmore_add span{
border-bottom:1px solid #000000;
width:50px;
display:inline-block;
position:relative;
margin:0 0 0 20px;
}
.top_blog_readmore_add span:after{
content:"";
display:block;
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 0 10px;
border-color: transparent transparent transparent #000000;
position:relative;
left:calc(100% - 10px);
}
.top_blog_readmore_add a:hover{
text-decoration:none;
color:#c5c5c5;
}
.top_blog_box a h2{
color:#1c91ce;
text-decoration:underline;
}
.top_blog_box a:hover h2{
color:#4fb3e7;
}
.posts_index_main{
line-height:1.5rem;
padding:20px 0 0 0;
}
/*---------------------business-----------------------*/
#business,
#recruit,
#partner{
margin-top:-50px;
padding-top:50px;
}
.gray_bk{
background:#f4f4f4;
}
.business_area h4{
font-size:2rem;
font-weight:normal;
text-align:center;
}
.business_column{
display:flex;
padding:50px 0;
}
.business_column_box{
flex:0 1 33.33333%;
max-width:33.33333%;
padding:0 20px;
}
.business_column_box img{
max-width:100%;
border:1px solid #1c91ce;
}
.business_column_box h3{
font-size:2.2rem;
color:#1c91ce;
font-weight:normal;
border:1px solid #1c91ce;
padding:5px 0;
text-align:center;
margin:0;
}
/*--------------------footer------------------*/
.recruit_area{
background:url('https://www.kaisei-j.tokyo/images/recruit.jpg');
background-size:cover;
color:#ffffff;
padding:50px 0;
}
.recruit_column{
display:flex;
}
.recruit_box1{
flex:0 1 25%;
max-width:25%;
}
.recruit_box2{
flex:0 1 75%;
max-width:75%;
}
.recruit_area a,
.partner_area a{
color:#ffffff;
}
.partner_area{
background:url('https://www.kaisei-j.tokyo/images/partner.jpg');
background-size:cover;
color:#ffffff;
padding:50px 0;
}
ul.partner_list{
display:flex;
}
ul.partner_list li{
color:#ffffff;
border:1px solid #ffffff;
padding:2px 30px;
font-size:2rem;
margin:0 20px;
}
ul.partner_list_link{
display:flex;
margin:30px 0 0 0;
}
ul.partner_list_link li a{
color:#294084;
border:1px solid #ffffff;
background:#ffffff;
padding:10px 30px;
font-size:2rem;
margin:0 20px;
}
ul.partner_list_link li a:hover{
color:#ffffff;
border:1px solid #ffffff;
background:none;
text-decoration:none;
}
.f_b_b{
font-size:3rem;
font-weight:bold;
letter-spacing:2px;
}
.f_s{
font-size:1.8rem;
}
.footer{
background:#f3f3f3;
}
.copy{
display:none;
}
ul.f_menu{
text-align:right;
}
ul.f_menu li a{
color:#000000;
}
.footer_add{
display:flex;
color:#000000;
}
.footer_add_box{
flex:0 1 50%;
max-width:50%;
text-align:left;
}
.footer_add_box:nth-of-type(1){
position:relative;
top:-30px;
}
.footer_add_box img{
max-width:30%;
}
.add_footer_txt_right{
text-align:right;
}
.footer_address{
line-height:2em;
padding:30px 0 0 0;
}
/*---------------------company------------------------*/
table.company{
width:100%;
margin:0 0 50px 0;
}
table.company th{
width:20%;
padding:20px 0;
text-align:center;
border-bottom:3px solid #1c91ce;
vertical-align:top;
}
table.company td{
width:80%;
padding:20px;
border-bottom:3px solid #dcdcdc;
}
table.company td iframe{
max-width:100%;
}
/*------------------------history---------------------*/
.history_line{
border-left:3px solid #1c91ce;
position:relative;
left:calc(20% + 80px);
}
ul.history_area{
position:relative;
right:40px;
}
ul.history_area li{
padding:30px 0;
}
ul.history_area li p{
font-family: 'Oswald', sans-serif;
background:#1c91ce;
width:80px;
height:80px;
border-radius:50%;
color:#ffffff;
font-size:2rem;
font-weight:bold;
text-align:center;
padding:15px 0;
}
.history_detail{
padding:0 0 0 100px;
}
.history_general{
color:#294084;
padding:0 0 0 100px;
}
/*---------------------products----------------------*/
.products_area{
position:relative;
max-width:100%;
}
.products_sub_title{
font-size:2rem;
text-align:center;
padding:30px 0 0 0;
}
.products_area img{
max-width:100%;
}
.products_area .slider-for{
width:100%;
margin:30px 0;
}
.products_area .slider-for li img{
padding:0 30px;
}
.products_area .slider-for li h4{
font-size:2rem;
font-weight:normal;
padding:0 0 0 30px;
}
.products_area .slider-nav-wrap .slider-nav .slick-slide{
-webkit-transition: opacity .3s ease;
transition: opacity .3s ease;
opacity:1;
}
.products_area .slider-nav-wrap .slider-nav .slick-slide:hover{
opacity:.5;
}
.products_area .slider-nav-wrap .slick-arrow{
position:relative;
padding:20px 0 0 0;
}
.products_area .slider_for_nav .slick-nav-arrows .slick-prev{
color:#000000;
cursor:pointer;
position:absolute;
left:0;
}
.products_area .slider_for_nav .slick-nav-arrows .slick-next{
color:#000000;
cursor:pointer;
position:absolute;
right:0;
}
.products_area .slider_for_nav .slick-nav-arrows .slick-next img,
.products_area .slider_for_nav .slick-nav-arrows .slick-prev img{
max-width:30px;
}
.products_txt{
border-top:1px solid #294084;
margin:50px 0;
}
.products_txt details{
border-bottom:1px solid #294084;
}
.products_txt details summary{
list-style:none;
cursor:pointer;
padding:10px 20px 10px 10px;
font-size:1.6rem;
color:#294084;
position:relative;
}
/**
* Chrome用のデフォルト三角削除
**/
.products_txt details summary::-webkit-details-marker{
display: none;
}
/**
* Font Awesomeのプラスアイコン使用
**/
.products_txt details summary::after{
content: '+';
color:#294084;
padding:0 20px 0 0;
position:absolute;
right:0;
}
/**
* アコーディオンがオープン時はマイナスアイコンに変更
**/
.products_txt details[open] summary::after{
content: '-';
color:#294084;
position:absolute;
right:0;
}
/*.products_txt details p{
padding:30px 0;
border-top:1px solid #294084;
}
*/
table.products_detail{
border-top:1px solid #294084;
width:100%;
}
table.products_detail th{
width:80%;
font-weight:normal;
padding:5px 0;
vertical-align:top;
}
table.products_detail td{
width:20%;
padding:5px 0;
}
/*------------------------SDGs------------------------*/
.sdgs_img{
width:30%;
margin:0 auto;
padding:30px 0;
}
.sdgs_img img{
max-width:100%;
}
.sdgs_column{
display:flex;
flex-wrap:wrap;
}
.sdgs_box{
flex:0 1 50%;
padding:40px;
}
.sdgs_box h2{
color:#1c91ce;
font-size:2rem;
font-weight:bold;
}
.sdgs_box h2 img{
max-width:8%;
margin:0 20px 0 0;
}
ul.sdgs_txt_list{
list-style:disc;
padding:0 0 0 20px;
}
ul.sdgs_icon{
display:flex;
}
ul.sdgs_icon li{
flex:0 1 25%;
padding:0 10px;
}
ul.sdgs_icon li img{
max-width:100%;
}
ul.sdgs_color{
display:flex;
}
ul.sdgs_color li{
flex:0 1 4.8%;
margin:0 0.5%;
height:10px;
}
ul.sdgs_color li:nth-of-type(1){
background:#023067;
}
ul.sdgs_color li:nth-of-type(2){
background:#004c88;
}
ul.sdgs_color li:nth-of-type(3){
background:#28a838;
}
ul.sdgs_color li:nth-of-type(4){
background:#0075ba;
}
ul.sdgs_color li:nth-of-type(5){
background:#407936;
}
ul.sdgs_color li:nth-of-type(6){
background:#d39206;
}
ul.sdgs_color li:nth-of-type(7){
background:#f5a20b;
}
ul.sdgs_color li:nth-of-type(8){
background:#dd1367;
}
ul.sdgs_color li:nth-of-type(9){
background:#ec6a06;
}
ul.sdgs_color li:nth-of-type(10){
background:#970a31;
}
ul.sdgs_color li:nth-of-type(11){
background:#f1bd00;
}
ul.sdgs_color li:nth-of-type(12){
background:#00a6d9;
}
ul.sdgs_color li:nth-of-type(13){
background:#e83418;
}
ul.sdgs_color li:nth-of-type(14){
background:#c502e8;
}
ul.sdgs_color li:nth-of-type(15){
background:#1b973a;
}
ul.sdgs_color li:nth-of-type(16){
background:#d6a600;
}
ul.sdgs_color li:nth-of-type(17){
background:#e4011e;
}
ul.sdgs_color2{
display:flex;
}
ul.sdgs_color2 li{
flex:0 1 4.8%;
margin:0 0.5%;
height:10px;
}
ul.sdgs_color2 li:nth-of-type(17){
background:#023067;
}
ul.sdgs_color2 li:nth-of-type(16){
background:#004c88;
}
ul.sdgs_color2 li:nth-of-type(15){
background:#28a838;
}
ul.sdgs_color2 li:nth-of-type(14){
background:#0075ba;
}
ul.sdgs_color2 li:nth-of-type(13){
background:#407936;
}
ul.sdgs_color2 li:nth-of-type(12){
background:#d39206;
}
ul.sdgs_color2 li:nth-of-type(11){
background:#f5a20b;
}
ul.sdgs_color2 li:nth-of-type(10){
background:#dd1367;
}
ul.sdgs_color2 li:nth-of-type(9){
background:#ec6a06;
}
ul.sdgs_color2 li:nth-of-type(8){
background:#970a31;
}
ul.sdgs_color2 li:nth-of-type(7){
background:#f1bd00;
}
ul.sdgs_color2 li:nth-of-type(6){
background:#00a6d9;
}
ul.sdgs_color2 li:nth-of-type(5){
background:#e83418;
}
ul.sdgs_color2 li:nth-of-type(4){
background:#c502e8;
}
ul.sdgs_color2 li:nth-of-type(3){
background:#1b973a;
}
ul.sdgs_color2 li:nth-of-type(2){
background:#d6a600;
}
ul.sdgs_color2 li:nth-of-type(1){
background:#e4011e;
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Tablet_yoko
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media only screen and (min-width: 1025px) and (max-width: 1280px) {
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Tablet_横（小さい）
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media only screen and (min-width: 770px) and (max-width: 1024px) {
.footer_add{
padding-right:20px;
padding-left:20px;
}
ul.f_menu{
padding-right:20px;
}
.sp_none{
display:none;
}
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Smart Phone_yoko とタブレット縦（小さい）
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media only screen and (min-width: 480px) and (max-width: 769px) {
.footer_add{
padding-right:20px;
padding-left:20px;
}
ul.f_menu{
padding-right:20px;
}
.top_blog_column{
width:calc( 80% - 200px);
/*padding:0 0 0 300px;*/
margin:0 0 0 200px;
}
.business_column_box h3{
font-size:2rem;
}
ul.partner_list li,
ul.partner_list_link li{
font-size:1.8rem;
padding:2px 20px;
}
.recruit_box1{
flex:0 1 30%;
max-width:30%;
}
.recruit_box2{
flex:0 1 70%;
max-width:70%;
}
.history_line{
left:calc(5% + 80px);
}
.sdgs_column{
display:block;
}
}
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
Smart Phone_tate Only
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media only screen and (max-width: 479px) {
h2.kaisei_title{
max-width:100%;
position:relative;
top:50px;
padding:0 0 50px 0;
}
/*-------blog--------*/
.top_blog{
padding:60px 0 60px 0;}
.top_blog_column{
width:100%;
float:none;
padding:20px;
margin:0;
position:relative;
border-bottom:1px solid #c5c5c5;
position:relative;
top:0;
}
.top_blog_column:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;}
div.top_blog_column:nth-of-type(-n+2){
margin:0 0 20px 0;}
.blog_date{
width:100%;
float:none;
padding:30px 0 0 0;}
.top_blog_box{
width:100%;
float:left;
margin:-20px 0 0 0;}
.blog_readmore{
display:none;}
.top_blog_img{
display:none;}
.top_blog_detail{
display:none;}
.top_blog_column h2{
font-size:100%;
height:40px;}
.top_blog_readmore_add{
position:relative;
bottom:0;
text-align:right;
padding:0 20px 0 0;
}
.business_column{
display:block;
padding:30px 0;
}
.business_column_box{
max-width:100%;
padding:20px;
}
.recruit_area{
background:url('https://www.kaisei-j.tokyo/images/recruit_sp.jpg');
background-size:cover;
color:#ffffff;
padding:30px 0;
}
.recruit_column{
display:block;
}
.recruit_box1{
max-width:100%;
}
.recruit_box2{
max-width:100%;
padding:0 20px;
}
.partner_area{
background:url('https://www.kaisei-j.tokyo/images/partner_sp.jpg');
background-size:cover;
color:#ffffff;
padding:30px 0;
}
ul.partner_list{
display:block;
}
ul.partner_list li{
padding:2px 20px;
font-size:1.8rem;
margin:10px 20px;
text-align:center;
}
ul.partner_list_link{
display:block;
margin:30px 0 0 0;
}
ul.partner_list_link li{
text-align:center;
margin:10px 0;
}
ul.partner_list_link li a{
padding:10px 20px;
width:100%;
display:block;
font-size:1.8rem;
margin:0 auto;
}
ul.f_menu{
text-align:center;
}
.footer_add{
display:block;
}
.footer_add_box{
max-width:100%;
text-align:center;
padding:0 20px;
}
.footer_add_box:nth-of-type(1){
position:relative;
top:0;
}
.footer_add_box img{
max-width:50%;
padding:30px 0;
}
.add_footer_txt_right{
text-align:center;
}
.footer_address{
line-height:2em;
padding:0 20px;
}
.htmls,
.contact_other_page,
.news{
padding-top:30px;
}
/*---------------------company------------------------*/
table.company{
margin:0 0 30px 0;
}
table.company th{
width:100%;
display:block;
padding:20px 0 0 0;
text-align:center;
border-bottom:3px solid #1c91ce;
}
table.company td{
width:100%;
display:block;
padding:10px 20px 20px 20px;
border-bottom:none;
text-align:center;
}
.pcnone{
display:block;
}
/*------------------------history---------------------*/
.history_line{
border-left:3px solid #1c91ce;
position:relative;
left:calc(3% + 25px);
}
ul.history_area{
position:relative;
right:25px;
}
ul.history_area li{
padding:30px 0;
}
ul.history_area li p{
background:#1c91ce;
width:50px;
height:50px;
border-radius:50%;
color:#ffffff;
font-size:1.6rem;
font-weight:bold;
text-align:center;
padding:5px 0;
}
.history_detail{
padding:0 20px 0 50px;
}
.history_general{
color:#294084;
padding:0 20px 0 50px;
}
.products_area .slider_for_nav .slick-nav-arrows .slick-next img,
.products_area .slider_for_nav .slick-nav-arrows .slick-prev img{
max-width:15px;
}
.products_area .slider-nav-wrap .slick-arrow{
padding:0;
}
.products_area .slider-for li h4{
font-size:1.6rem;
}
.products_area .slider_for_nav .slick-nav-arrows .slick-prev{
top:-20px;
}
.products_area .slider_for_nav .slick-nav-arrows .slick-next{
top:-20px;
}
table.products_detail th{
width:100%;
display:block;
font-weight:normal;
padding:5px 0;
vertical-align:top;
}
table.products_detail td{
width:100%;
display:block;
padding:5px 0;
border-bottom:1px solid #dcdcdc;
color:#5d5d5d;
}
.sdgs_img{
width:80%;
}
.sdgs_column{
display:block;
}
.sdgs_box{
padding:20px;
}
ul.sdgs_color li{
height:5px;
}
ul.sdgs_color2 li{
height:5px;
}
.top_img_sp{
display:block;
}
.top_img_pc{
display:none;
}
}
/*----------template8のフォントサイズを大きくしたらできる隙間対応------------------*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
tablet tate 〜 smartPhone tate まで (menu)
:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
@media only screen and (max-width: 979px) {
ul.h_menu{
display:none;
position:relative;
top:-14px;
padding:0;
background:rgba(255,255,255,1);
}
ul.h_menu li{
background:rgba(255,255,255,1);
border-bottom:1px solid #294084;
}
ul.h_menu li a{
color:#294084;
}
.logo{
margin:0 0 0 20px;
padding-top:0;
top:8px;
}
.toggle{
position:relative;
left:calc(100% - 50px);
top:-5px;
font-size:3rem;
}
.toggle a{
color:#294084;
}
.toggle a:hover{
color:#1c91ce;
}
}