@charset "utf-8";
/* CSS Document */
/* レスポンシブル設定は768px～ 1em = 16px*/

* {margin:0;padding:0;}
/*html {scroll-behavior: smooth;}*/

/*
@font-face {
  font-family: "Noto Sans JP";
  src: url("https://antrum.co.jp/m-test/test_tsukurikata/font/NotoSans-Light.ttf"),
	  url("https://antrum.co.jp/m-test/test_tsukurikata/font/NotoSans-Medium.ttf"),
	  url(".https://antrum.co.jp/m-test/test_tsukurikata/font/NotoSans-Regular.ttf"),
	  url("https://antrum.co.jp/m-test/test_tsukurikata/font/NotoSans-Bold.ttf"),
	  url("https://antrum.co.jp/m-test/test_tsukurikata/font/NotoSans-ExtraBold.ttf");
}
*/
/*@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);*/

body {background-color: #f9f9f9; color: #333333; font-size:1em;
/*font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;*/
font-family: Lato,"Noto Sans JP","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;}
/*html {overflow-y:scroll;}*/
main {margin: 0 auto;width: 80%;}
section{margin: 1.0em 0;}

p{font-size:1.08em; line-height:1.8em;  margin-bottom: 1.5rem;}
li,dt,dl {font-size:1.08em; line-height:1.8em; }
li {list-style-type:none;}
img {border:0;}
i{font-style: normal;}



/*
h1,h2,h3{font-family: kozuka-gothic-pr6n, sans-serif; font-style: normal; font-weight: 200;}
*/
/*
h1 {font-size:2.0em; font-weight: normal; color: #333; text-align: center;}
h2 {font-size:1.8em; font-weight: normal; color: #333; text-align: center;}
h3 {font-size:1.6em; font-weight: normal; color: #333; text-align: center;}
*/


.small {font-size: 0.7em;}

/* レスポンシブル改行タグ */
.pc{display:inline-block;}
.sp{display:none;}
/*@media screen and (max-width: 540px) {*/
@media screen and (max-width: 768px) {
    .pc{display:none;}
    .sp{display:inline-block;}
}

/* Link */
a{user-select: none; text-decoration:none; transition : all 0.5s;}
a:link {color:#666; text-decoration:none;}
a:visited {color:#FFF; text-decoration:none;}
a:hover {color:#FFF; text-decoration:underline;}
a:active {color:#666;}


/* スクロール固定解除の位置を半角数値で設定する為のタグ */
#fix-clear-position{display: none;}
.h_fix{position:fixed; top:0; box-shadow: 2px 2px 4px #FFF;}
@media screen and (max-width: 1030px) {  
	.h_fix{position:relative; top:0;}	
}

/* header */
#header{z-index:999; width: 100%; background: #000; }
.h_fix{box-shadow: 2px 2px 4px #aaa;}

#header header{max-width: 1200px; width:calc(100% - 40px); margin: auto; display: flex; justify-content: space-between; text-align: center; z-index: 999; padding: 20px 20px;}

#header header .site_header_logo{width: 235px; height: 48px;}
#header header .site_header_logo a{display: contents; height: fit-content;}
#header header .site_header_logo a img{width: 100%; height: auto;}

#header header input,label{display: none;}
#header header ul.global_nav_list{width: calc(100% - 235px); margin: auto; 
    display: flex; justify-content:flex-end; align-items: center;}
#header header ul.global_nav_list li.global_nav_list_item{padding: 14px 1.5em;}  
#header header ul.global_nav_list li.global_nav_list_item a{color: #FFF; line-height: 100%; font-size: 14px; font-weight: bold;} 

@media screen and (max-width: 1200px) {
	#header header ul.global_nav_list li.global_nav_list_item{padding: 14px 1.0em;}
}
@media screen and (max-width: 1030px) {    
	#header header{position: relative; top:0;}
	
    #header header ul.global_nav_list{flex-wrap: wrap; transition: all 0.8s 0s ease; background: rgba(0,0,0,0.8); width: 100%; padding: 50px 0; position: absolute; top:-550px; left: 0;}
    #header header ul.global_nav_list li{width: calc(100% - 30%); text-align: center; padding: 20px 0; margin:0 15%; border-bottom: 1px solid #aaa;}
	
    #header header label{display: flex; height: 46px; width: 46px; justify-content: center; align-items: center; z-index: 90; background: rgba(0,0,0,0.3); position: fixed; right:20px; border: 1px solid #aaa;}
    #header header label span,#header header label span:before,#header header label span:after {content: '';display: block;
		height: 2px;width: 25px;border-radius: 3px;background-color: #ffffff;position: absolute;
    transition: all 0.2s 0s ease;}
	
    #header header label span:before {bottom: 8px;}
    #header header label span:after {top: 8px;}
    #header header input:checked ~ label{background: rgba(0,0,0,0.0);}
    #header header input:checked ~ label span{background-color: rgba(255, 255, 255, 0);}
    #header header input:checked ~ label span::before {bottom: 0;transform: rotate(45deg);}
    #header header input:checked ~ label span::after {top: 0; transform: rotate(-45deg);}
    #header header input:checked ~ label span{background-color: rgba(255, 255, 255, 0);}
    #header header input:checked ~ label span::before {bottom: 0;transform: rotate(45deg);}
    #header header input:checked ~ label span::after {top: 0; transform: rotate(-45deg);}
    #header header input:checked ~ ul.global_nav_list{background: rgba(0,0,0,0.8); color:#fff; width: 100%; height: auto; 
		position: fixed; top:0; left: 0; padding-top: 90px; padding-bottom: 200%;}
}

/* footer */
#footer {width: 100%; margin:auto; background: #000; }
#footer footer {text-align: center; color: #FFF; font-size: 12px; padding: 20px 0px;}
#footer footer p{}
#footer footer p a{text-decoration: none; color: #FFF;}
#footer footer .copyright{padding: 30px 0;}

/* page_top */
#page_top{position: fixed; bottom: 20px; right: 20px; z-index: 999; width: 40px; height: 40px; background: rgba(0,0,0,0.8);
	border: 1px solid #aaa; background-image:url("../img/to-top-btn-icon.svg"); background-size: 50%; background-repeat: no-repeat; background-position: center;}


/* スクロールフェードイン用のCSS */
/*
.slide-bottom {
    opacity: 0;
    transform: translateY(100px);
    transition: all 0.8s 0s ease-out;
}

.anchor{display: block;
   margin-top:-94px;
   padding-top:94px;
}
@media screen and (max-width: 540px) {
    .anchor{display: block;
       margin-top:0px;
       padding-top:0px;
    }
}
*/



article{max-width: 1200px; width:calc(100% - 40px); margin: auto; padding: 0px 20px;}
@media screen and (max-width: 1030px) {
	article{width:calc(100% - 40px); margin: auto; padding: 0px 20px;}
}


section.eye_catching{width: 100%; margin: auto; overflow: hidden;}
section.eye_catching img{width: 100%; height: auto; margin-bottom: 0px; position: relative; z-index: 0;}
section.eye_catching .swiper-pagination{z-index: 9; position: relative; top:0px; height: 10px; display: flex; justify-content: center;}
section.eye_catching .swiper-pagination span{z-index: 9; background: #aaa; width: 30px; height: 5px; margin: auto 2px; border: 1px solid #FFF; cursor: pointer;}
section.eye_catching .swiper-pagination span.swiper-pagination-bullet-active{background: #555;}


section.eye_catching .swiper-container{position: relative;}
section.eye_catching .swiper-button-prev,
section.eye_catching .swiper-button-next{display: block; border: 0px solid #000; width: 50px; height: 30px; z-index: 99;
	position: absolute; top:calc(50% - 25px); transform: rotate(90deg); cursor: pointer;
background-image:url("../img/to-top-btn-icon.svg"); background-size: 70%; background-repeat: no-repeat; background-position: center; }
section.eye_catching .swiper-button-prev{left: 10px; transform: rotate(-90deg);}
section.eye_catching .swiper-button-next{left: calc(100% - 60px);}

/*
@media screen and (max-width: 1030px) {
	section.eye_catching .swiper-button-prev,section.eye_catching .swiper-button-next{top:calc(40% - 25px);}
}
*/

.top_intro{width:996px; display: flex; flex-wrap: wrap; align-items: center; margin: 70px auto;}
.top_intro h2.top_intro_title{width: 230px; font-size: 64px; font-weight: 700; margin-bottom: 20px; line-height: 1; }
.top_intro h2.top_intro_title small{font-size: 16px; display: block; padding-top: 16px;}
.top_intro div{width: calc(100% - 280px); padding-left: 50px;}
.top_intro div h3{font-size: 28px; font-weight: 700; margin-bottom: 16px; line-height: 1.4;}  
.top_intro div .top_intro_txt{line-height: 1.7rem; margin-bottom: 0;}

@media screen and (max-width: 1100px) {
	.top_intro{width:calc(100% - 40px); margin: 70px 20px;}
	.top_intro div{width: calc(100% - 260px); padding-left: 30px;}	
}
  
@media screen and (max-width: 940px) {
	.top_intro{width:calc(100% - 40px); margin: 70px 20px; }
	.top_intro h2.top_intro_title{width: 100%; text-align: center; font-size: 40px; }
	.top_intro div{width: calc(100% - 0px); padding-left: 0px;}
	
}

.top_kadai{width: 100%; background: #333; text-align: center;}

.top_kadai h2.top_kadai_title{max-width: 1200px; width: calc(100% - 40px); margin: auto auto 70px; text-align: left; font-size: 48px; font-weight: 700; line-height: 1; color: #FFF; padding: 32px 0;}
.top_kadai h2.top_kadai_title small{display: block; font-size: 16px; line-height: 1; padding-top: 16px;}

@media (max-width: 768px) {
    .top_kadai h2.top_kadai_title {font-size: 32px; }
}

.top_kadai_detail{width: 100%; display: flex; flex-wrap: wrap; background-color: #f9f9f9;}
.top_kadai_detail .tab_area{width: calc(80% - 50px); margin-right: 50px;}
.top_kadai_detail #nav_menu_right{width: 20%;}

@media screen and (max-width: 1100px) {
	.top_kadai_detail .tab_area{width: calc(100% - 0px); margin-right: auto;}
	.top_kadai_detail #nav_menu_right{width: 100%;}	
}





/*タブ切り替え全体のスタイル*/
.tabs {width: 100%;	padding-bottom: 40px; margin: 0 auto auto; /*margin-top: 50px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/}
.tabs {display: flex; flex-wrap: wrap; }
/*タブのスタイル*/
.tab_item {width: calc(100%/4 - 10px); margin-right: 10px; height: 56px; background-color: #d9d9d9; line-height: 120%; font-size: 16px; text-align: center; color: #565656; display: flex; justify-content: center; align-items: center; font-weight: bold; transition: all 0.2s ease; border-radius: 4px 4px 0 0; /*border-bottom: 3px solid #5ab4bd;*/}
.tab_item:hover {opacity: 0.75; cursor: pointer; color: #FFF;}

@media (max-width: 768px) {
	.tabs {display: flex; flex-wrap: wrap; justify-content: space-between;}
	.tab_item{width: calc(100%/3 - 2px); margin-right: 0px; }
}


/*ラジオボタンを全て消す*/
input[name="tab_item"] { display: none;}

/*タブ切り替えの中身のスタイル*/
.tab_content {width: 100%; display: none; padding: 20px 20px; clear: both; overflow: hidden; background-color: #fff; border: 1px solid #0000001f;}

/*選択されているタブのコンテンツのみを表示*/
#all:checked ~ #all_content,
#programming:checked ~ #programming_content,
#design:checked ~ #design_content {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {background-color: #000; color: #fff;}


h2.changecase_lst_title{font-size: 1.75rem; padding: .5em 0 .5em .5em; background: #EAEAEA; 
	border-top: 2px solid #000; border-bottom: 1px solid rgba(0,0,0,0.6); margin-bottom: 30px;}

.changecase_lst{width: 100%; display: flex; flex-wrap: wrap; justify-content:space-between;}
.changecase_lst .changecase_lst_item{width: calc(100% / 3 - 20px); padding-bottom: 65px; position: relative;}
@media screen and (max-width: 800px) {
	.changecase_lst .changecase_lst_item{width: calc(100% / 2 - 10px); padding-bottom: 65px; position: relative; margin-bottom: 20px;}
}
@media screen and (max-width: 575px) {
	.changecase_lst .changecase_lst_item{width: calc(100% / 1 - 0px); padding-bottom: 65px; position: relative; margin-bottom: 20px;}
}

.changecase_lst .changecase_lst_item a{color: #333;}
.changecase_lst .changecase_lst_item a:hover{text-decoration: none;}
.changecase_lst .changecase_lst_item h3{width: 100%; height: 150px; }
.changecase_lst .changecase_lst_item h3 + p{width: calc(100% - 40px); padding: 20px 20px; font-size: 1.125rem; line-height: 1.4; font-weight: 700; margin-bottom: 0; height: 4em;}
@media screen and (max-width: 768px) {
	.changecase_lst .changecase_lst_item h3 + p{height: auto;}
}


.changecase_lst .changecase_lst_item h3 img{width: 100%; height: 100%; object-fit: cover; border-radius: 6px 6px 0 0;}

.changecase_lst .changecase_lst_item .category_detail{display: block; width: calc(100% - 40px); margin: auto 20px; background-color: orange; color: #FFF; font-weight: 700; margin-bottom: 0; text-align: center;}
.changecase_lst .changecase_lst_item .category{display: block; width: calc(100% - 40px); margin: auto 20px 20px; text-align: center;}
.changecase_lst .changecase_lst_item .trouble{display: block; width: calc(100% - 40px); margin: auto 20px; }
.changecase_lst .changecase_lst_item .trouble dt{display:inline-block; background-color: #5996c7; color: #FFF; text-align: center; font-size: 1rem; font-weight: 700; padding: 0px 10px; margin-bottom: 6px;}
.changecase_lst .changecase_lst_item .trouble dd{line-height: 1.6em;}

.changecase_lst .changecase_lst_item .link_detail{position: absolute; bottom: 10px; right: 10px; display: inline-block; font-size: 12px; padding: .25rem .5rem; background: #000; color: #FFF; line-height: 1.5;}




.page_title{background: #333333; width: 100%; padding: 1.5em 0;}
.page_title h1{color: #FFF; font-size: 2rem; font-weight: 700; line-height: 1.4em; text-align: left;
max-width: 1200px; width:calc(100% - 40px); margin: auto; }

.breadcrumb_list{max-width: 1200px; width:calc(100% - 40px); display: flex; margin: 10px auto 50px 0; }
.breadcrumb_list li.breadcrumb_list_item{font-size: 12px; color: #333; position: relative; }
.breadcrumb_list li.breadcrumb_list_item:after{content: "/"; padding: 0 0.5em;}
.breadcrumb_list li.breadcrumb_list_item a{margin: auto 10px auto auto; color: #333; display: contents;}
.breadcrumb_list li.breadcrumb_list_item:last-child:after{content: ""; }

@media screen and (max-width: 768px) {
	.breadcrumb_list{width:100%; margin: 10px auto 10px 0; flex-wrap: wrap;}
}


.h2_top{font-size: 1.5rem; font-weight: bold; line-height: 2.0rem; margin-bottom: 30px;}
h2.contents{font-size: 1.75rem; padding: .5em 0 .5em .5em; background: #EAEAEA; 
	border-top: 2px solid #000; border-bottom: 1px solid rgba(0,0,0,0.6); margin-bottom: 30px;}

h3.contents{font-size: 1.5rem; font-weight: bold; margin-bottom: 30px;}
h4.contents{font-size: 1.3rem; font-weight: bold; margin-bottom: 30px;}


@media screen and (max-width: 1030px) {
	p,li,dt,dl {font-size: calc(16px * .875);}
	h2.contents{font-size: 1.55rem;}
	h3.contents{font-size: 1.3rem; font-weight: bold; margin-bottom: 30px;}
	h4.contents{font-size: 1.1rem; font-weight: bold; margin-bottom: 30px;}
}

.title_b_line{border-bottom: 1px solid #000; padding: 0 0 .5em;}

.txt_left{text-align: left;}
.txt_right{text-align: right;}
.txt_center{text-align:center;}

.img_area{width: 100%; margin: 100px auto; text-align: center;}
.img_area img{margin: auto;}

@media screen and (max-width: 1030px) {
	.img_area{width: calc(100% - 40px); padding: 0 20px; margin-bottom: 50px; text-align: center;}
	.img_area img{margin: auto; width: 100%; height: auto;}
}

.btn_area{width: 100%; text-align: center;}
.btn_area a{display: inline-block; background: #000; color: #FFF; border-radius: 4px; padding: .6em 1.5rem; margin:auto auto 100px;}
.btn_area a:hover{text-decoration: none; background: #333;}