@charset "utf-8";

/*■■■■■■■■■■■共通■■■■■■■■■■■*/

body { color: #333333; margin: 0px; padding: 0px; font: 16px "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro"; background: #FFF;}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure{ margin: 0px; padding: 0px; }
*, *:before, *:after {  box-sizing: border-box; }
.kaigyou:after {content:""; display:block; clear:both;}
.clearfix:after {content:""; display:block; clear:both;}

img { max-width: 100%; height: auto; }
iframe {max-width:100%;}

a { color: #191970; }
a:hover { color: #837768; text-decoration: none; }

ul{ list-style-type: none; }

.mt_30 {margin-top:30px;}
.mt_50 {margin-top:50px;}

#container {  margin-right: auto; margin-left: auto; padding-top:15dvh; /* ←ヘッダー固定のための上部余白 */}

#contents { clear: left; width: 80%; padding-top: 0px; margin:50px auto 0 auto; display:block;}

/*■■■■■■■■■■■ヘッダー■■■■■■■■■■■*/

header {width: 100%; margin:0 auto 0 auto; padding:25px 10%; height:15dvh; position: relative; border-bottom:solid 1px #beac8c; display: flex; align-items: center; justify-content: space-between; top: 0; left: 0; z-index: 1000; background:#FFFFFF; position: fixed;   /* ←固定 */}
header h1.logo { margin: 0; padding: 0; font-size: 100%; font-weight: normal; }
header .logo {width:31%; height:auto; }
header .logo img{ width:100%; height:auto; }

header.sp {display:none;}/* ←スマホ用のヘッダーを非表示にする */


/*■■■■■■■■■■■ヘッダーメニュー■■■■■■■■■■■*/
nav.menubar { width: 60%; padding: 0px 0; }
nav.menubar ul { list-style: none; margin: 0; padding: 0; }
nav.menubar ul.menu { width: 100%; margin: 0 auto; display: flex; justify-content: flex-end; }
nav.menubar ul.menu > li { position: relative; width: calc(100% / 5); text-align: center; float:left; }
nav.menubar ul li a {border-right:0.5px solid #beac8c; color: #131313; font-family: serif; text-decoration: none; display: block; width: 100%; padding: 0px 0; box-sizing: border-box; }
nav.menubar ul li:first-child a {border-left:0.5px solid #beac8c;}
nav.menubar ul li a:hover { opacity: 0.4; transition: 0.8s; }

/* 子メニュー */
nav.menubar ul.submenu { display: none; position: absolute; top: 100%; left: 0; width: 15vw; background: #ffffff; z-index: 999; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }
nav.menubar ul.submenu li { width: 100%; }
nav.menubar ul.submenu li a { border:none; padding: 10px; text-align: left; border-bottom: 1px solid #eeeeee; }
nav.menubar ul.menu > li.has-submenu:hover .submenu { display: block; }



/*■■■■■■■■■■■メイン（真ん中）■■■■■■■■■■■*/
#main { float:left; width: 66.66%; padding: 0px 0px 30px 0px;}


#main h1 {color:#131313; display: block; width: fit-content; margin: 0px auto 60px; background:#FFFFFF; font-size: 32px; background: linear-gradient(to right, #f0efe2 50%, #beac8c 50%); background-size: 100% 5px; background-repeat: no-repeat; background-position: bottom; line-height: 1; padding-bottom: 10px;}

#main h2 {color:#131313;  font-size: 28px; border-bottom:solid 5px #beac8c; margin:60px 0 30px; }
#main h3 {color:#131313; font-size: 24px; margin:50px 0 20px; }
#main h2 + h3 { margin-top: 30px; }
#main h4 {color:#beac8c; margin:50px 0 15px; }
#main p { margin-bottom:15px; padding:0; line-height:1.8;}
#main li { padding: 0em 0px 0em; }
#main ul{list-style-type:disc; margin:0px 40px 30px; line-height: 150%;}
#main ol{margin:0px 40px 30px; line-height: 150%;}
#main li a { line-height: 200%;}
#main img { max-width: 99%; height: auto;}







/*■■■■■■■■■■■ぱんくずリスト■■■■■■■■■■■*/
#breadcrumb { display: flex; font-size:14px; color:#898989; margin-top:50px;}
.breadcrumb-home a{ margin-right:10px; color:#898989;}
.breadcrumb-item { margin-left:10px; }



/*■■■■■■■■■■■サブ左側■■■■■■■■■■■*/
#sub { float: right; width: 30%; padding-bottom: 30px; margin-bottom:50px;}
#sub img { max-width:100%; }

#sub ul li a { text-decoration: none; }
#sub ul li a:hover { opacity:0.7; transition:0.8s ;}

#sub .sideservice_box {margin-bottom:30px;}
#sub .sideservice_box li a{display:block; padding:15px 0px 15px 15px; border-bottom:solid 0.5px #f0efe2; color:#333333; }
#sub .sideservice_box_bar {border-bottom:solid 3px #f0efe2; color:#FFFFFF; background: #beac8c; padding:8px 15px; font-size: 22px;  letter-spacing:0.1em;}



/*■■■■■■■■■■■フッター■■■■■■■■■■■*/
footer {background: #beac8c; color:#FFFFFF; font-size:12px; clear: both; text-align: center; padding-top: 15px; padding-bottom: 15px; }
footer small { display: block; }

nav.footer_menubar {margin-bottom: 0.8rem; }
.footer_menubar ul { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 1.2rem; list-style: none;  margin: 0;  padding: 0;}
nav.footer_menubar ul li {padding:10px; }
nav.footer_menubar ul li a{text-decoration:none; color:#FFFFFF; }



/*■■■■■■■■■■■トップページ■■■■■■■■■■■*/
.home #main {width:100%;}
.home #main h2 {font-weight:normal; color:#131313; display: block; width: fit-content; margin: 50px auto 30px; background:#FFFFFF; font-size: 3vw; background: linear-gradient(to right, #f0efe2 50%, #beac8c 50%); background-size: 100% 5px; background-repeat: no-repeat; background-position: bottom; border-bottom:none;}

.service_box {margin-top:0; }
.service_box a{border:solid 0.5px #beac8c; color:#333333; text-decoration:none; float:left; width:49%; display:block; padding:25px; box-sizing: border-box; margin:0 2% 2% 0;}
.service_box a:hover { opacity: 0.7; transition: 1.0s;}
.service_box:nth-child(odd) a{ margin-right: 0; }
.service_title {font-weight:bold; margin-bottom:10px;}

/*■■■■■■■■■■■トップ背景画像■■■■■■■■■■■*/
.mainimg {position: relative; background-color:#f0efe2; background-image:url(../images/icath_index.png); display:block; background-size: cover; background-repeat: no-repeat; background-position: center center; height:85dvh;}
.mainimg_inner {position: absolute; top: 50%; transform: translateY(-50%);color:#131313; letter-spacing:0.1em; font-size:7.0vw; margin-left:10%;}
.mainimg_inner span {display:block; font-size:3.7vw;}

/* ↓上部画像の共通設定↓ */

.company_img, .recruitment_img, .contact_img, .privacy_policy_img, .compliance_policy_img, .sustainability_policy_img, .marketing_consulting_img, .store_display_img, .branding_consulting_img, .hc_management_img, .organization_development_img, .hr_consulting_img, .psychological_safety_img {text-align:center; background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)); display:block; height:150px; text-align:center; background-size: cover; background-repeat: no-repeat; background-position: center center; margin-bottom:80px;}
.img_inner_moji {color:#FFFFFF; font-size:30px; text-align:center; line-height:150px; letter-spacing:0.1em; font-family:serif;}

.contact_img {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/icath_contact.jpg); }
.recruitment_img {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/icath_recruitment.jpg); }
.company_img {background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(../images/icath_company.jpg); }






/*■■■■■■■■■■■会社概要のページ■■■■■■■■■■■*/

.company_info_table { border-collapse: collapse; width: 100%; margin-bottom:30px;}
.company_info_table td { border: 1px solid #999; padding: 8px; vertical-align: top; }
.company_info_table th { border: 1px solid #999; padding: 8px; vertical-align: top; background-color: #f0efe2; width: 20%;}

/*■■■■■■■■■■■お問い合わせのページ■■■■■■■■■■■*/
.contact_form {margin:0; padding:0; }
.contact_form iframe {width:100%; height:800px; }



/*■■■■■■■■■■■タブレット用の設定（768px～1020px）■■■■■■■■■■■*/

@media (min-width:768px) and (max-width:1020px)
{

}


/*■■■■■■■■■■■スマホの設定（767px以下）linear-gradient(#837768, #8F8477)■■■■■■■■■■■*/

@media (max-width : 767px)
{

header {display:none}/* PC用のヘッダーを非表示 */
header.sp {height:60px; display: flex; justify-content: space-between; align-items: center; width: 100%; padding:0;}/* スマホ用のヘッダーを表示 */

header.sp .logo { width: 60%; display:block; padding:0 2%; }
header.sp .logo img{ width:100%; height:auto; }
header.sp .contact_button {height:60px; width: calc(100% / 5); text-align:center; background: #beac8c url("../images/mail_icon.png") no-repeat center 10px / auto 26px;}
header.sp .contact_button a{height:60px; width: 100%; display:flex; align-items:flex-end; justify-content:center; text-decoration:none; font-family:serif;  font-size:10px; padding-bottom:5px; color:#FFFFFF;}
header.sp .contact_button a:hover{ color: #FFFFFF;}

/*■■■■■■■■■■■ハンバーガー■■■■■■■■■■■*/

.menu-toggle {display: none;}
.menubar_sp {width: calc(100% / 5); margin-right:0;}

.menu-button {width: 100%; text-align:center; height: 60px; background: url("../images/menu_button.png") no-repeat center 10px / auto 26px; cursor: pointer; display:flex; align-items:flex-end; justify-content:center; text-decoration:none; font-family:serif; font-size:10px; padding-bottom:5px; }

.sp-menu {position:absolute; left:0; width:80%; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; background: #fff;}

.menu-toggle:checked + .menu-button + .sp-menu { max-height: 800px;}

.sp-menu ul { margin: 0; padding: 0; list-style: none;}
.sp-menu li { list-style: none;}
.sp-menu li a { display: block; text-align:center; padding: 10px 0 10px; border-bottom: 1px solid #ddd; text-decoration: none; color: #333; }

.menu-toggle:checked + .menu-button {
  background: url("../images/close_button.png") no-repeat center 10px / auto 28px;
}


.mainimg {height: calc(100svh - 60px); }
.mainimg_inner {font-size:10.0vw; }
.mainimg_inner span {font-size:5.4vw;}

#container { width: auto; padding-top:60px; /* ←ヘッダー固定のための上部余白 */}

#contents {padding: 0% 5%; width:auto; }
#main { float: none; width:auto; overflow: hidden; box-sizing: border-box;}


.home #main h2 {margin: 30px auto 30px; font-size: 30px;  }

#main h1 {margin: 0px auto 28px; font-size: 30px; }
#main h2 { font-size: 26px; }
#main h3 { font-size: 22px; }
#main h4 { font-size: 20px; }

#sub { float: none; width: auto; overflow: hidden; box-sizing: border-box; padding: 0;}



.service_box a{width:98%; margin:0 1% 20px 1%; }

.topicpath ol { line-height: 100%; }
.topicpath ol { margin:1px 0 10px 0px; clear: both;}

/*■■■■■■■■■■■お問い合わせのページ■■■■■■■■■■■*/
.contact_form {margin:0; padding:0; }
.contact_form iframe {width:100%; height:800px; }



/*■■■■■■■■■■■フッター■■■■■■■■■■■*/
footer {padding-top:30px;}
nav.footer_menubar ul li {padding:0 10px 1px; }



}