@charset "utf-8";

/* bodyのセレクタにはfont-familyとbackground-colorのプロパティ以外は基本的に記述しない */
body{
  font-family: "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif;
  /* bodyに書体の設定を行うことですべての文字の形を管理できる。さらに、ボディに書体の設定を行わないとsafariのブラウザで文字の形がすべて明朝体になってしまうため予めbodyに書体の設定を行っておく。 */
  background-color: #fff;
  /* WEBサイト全体の背景色を設定できる。さらに、safariのサイト外のブラウザの時間表記等のされる上部の色を設定できる。 */
}

header h1,
header nav ul li a,
footer section h2{
  font-family: 'Noto Serif JP', serif;
}
h2,
h3,
th,
dt{
  font-family: 'Noto Sans JP', sans-serif;
}

.wrapper{
  max-width: 1980px;
  /* max-width: 1360px; */
  /* widthに絶対値を設定すると画面幅が小さくなった際に横スクロールが発生してしまうため、大枠の横幅は最大幅のみに絶対値を指定する。 */
  margin: 0 auto;
  /* 左右にautoの値を設定すると外側の余白が最大限つく設定になり、力が均衡して同じ値になり、要素が中央に配置される。 */
  background-color: #fff;
}

p{
  font-size: 1.6rem;
}

h1{
  font-size:5.3rem;
}

header h1 a{
  color: #1c155e;
}

/*  ヘッダー */
header{
  background-color: #fff;
}

header div.top{
  display: flex;
  justify-content: space-between;
}

header .g_nav_toi{
  width:300px;
  background-color: #fff;
  padding: 15px;
}

/* メールアイコン */
.dli-mail {
  display: inline-block;
  vertical-align: middle;
  color: #fff;
  line-height: 1;
  position: relative;
  width: 1.06667em;
  height: 0.8em;
  border: 0.1em solid currentColor;
  border-radius: 0.1em;
  box-sizing: content-box;
  overflow: hidden;
}

.dli-mail::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.75425em;
  height: 0.75425em;
  border: 0.1em solid currentColor;
  border-top-color: transparent;
  border-right-color: transparent;
  border-radius: 0 0 0 0.1em;
  box-sizing: content-box;
  transform: translate(-50%, -50%) rotate(-45deg) skew(10deg, 10deg);
}

header .g_nav_toi li a{
  display: block;
  width: 275px;
  height: 30px;
  background-color:#FBC52C;
  text-align: center;
  font-size: 1.7rem;
  box-shadow: #1c155e 5px 5px 5px;
  color: #fff;
}


header .g_nav_toi li address{
  font-size: 1.7rem;
}

header .g_nav{
  width:auto;
  background-color: #1c155e;

}

header .g_nav ul{
  display: flex;
  justify-content: flex-end
}

header .g_nav ul li{
  width: calc((100% / 6) - 30px);
  height: 50px;
}

header .g_nav ul li a{
  display: block;
  color: #fff;
  font-size: 2.5rem;
}

.vis_image{
  background-color: #9ae9f2;
  height: 300px;
  background-image: url(./../images/top_image.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  padding: 100px 0px 100px 1000px;
}

.vis_image p{
  font-size: 2rem;
}

.vis_image a{
  display: block;
  font-size: 1.95rem;
  box-shadow: #1c155e 5px 5px 5px;
  background-color: #FBC52C;
  color: #fff;
  width: 300px;
  margin: 10px auto;
}

.vis_image address{
  font-size: 1.8rem;
}

div.vis_image div.vis_image_toi{
  width: 350px;
  height: 125px;
  background-color: rgba(255, 255, 255, 0.8);
  line-height: 1.75;
}



/* TOPメイン */

main div.aisatsu{
  background-color: #fff;
  width: auto;
  height: 400px;
}

main h2{
  font-size: 3.5rem;
  background-color: #1c155e;
  color: #fff;
}

main figcaption{
  font-size: 1.65rem;
  text-align: center;
}

main strong{
  font-size: 2rem;
  font-weight: bold;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

main div.aisatsu article.a_aisatsu{
  display: flex;
}

main div.aisatsu h2{
  margin-top: 10px;
}

main div.aisatsu h3{
  font-size: 2.5rem;
  background-color: #1c155e;
  color: #fff;
}

main div.aisatsu p{
  font-size: 2rem;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

main div.aisatsu article.a_aisatsu div.d_aisatsu{
  background-color: #fff;
  width: calc(100% / 2);
  height: 300px;
  padding: 10px;
}

 main div.aisatsu article.a_aisatsu div.d_aisatsu div.d_aisatsu_m{
  display: flex;
  justify-content: space-between;
}


main div.aisatsu article.a_aisatsu div.d_aistasu div.d_aisatsu_m p{
  width: (100% / 2);
  height: 500px;
}

main div.aisatsu article.a_aisatsu div.rinen{
  background-color: #fff;
  width: calc(100% / 2);
  padding: 10px;
}



main div.riyouannai{
  background-color: #fff;
  width: auto;
  height: 300px;
}

main .riyouannai .flow{
  width: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}



main div.riyouannai section.flow div{
  width: calc((100% / 7) - 30px);
  height: 250px;
  text-align: center;
  font-size: 2rem;
}

main div.riyouannai section.flow div small{
  text-align: center;
  font-size: 1.6rem;
}

main div.riyouannai section.flow div:nth-child(even){
  width: 100px;
  height: 100px;
}

main div.riyouannai section.flow div.flow{
  text-align: center;
}

main div.gyoumu{
  background-color: #fff;
  width: auto;
  height: 350px;
}

main div.gyoumu h3{
  font-size: 2.5em;
  background-color: #1c155e;
  color: #fff;
  margin: 10px;
  text-align: center;
}

main div.gyoumu ul li a{
  display: block;
  font-size: 2rem;
} 

main article.m_gyoumu{
  display: flex;
  justify-content: space-between;
}

main div.gyoumu section.kojin{
  background-color: #fff;
  width: calc(100% / 2);
  height: 200px;
  text-align: center;
  /* border: #1c155e 1px solid; */
}

main div.gyoumu section.kojin ul{
  border: #1c155e 1px solid;
  margin: 10px;
  color: #1c155e;
}


main div.gyoumu section.kigyou_free{
  width: calc(100% / 2);
  height: 200px;
}

main div.gyoumu section.kigyou_free ul{
  border: #1c155e 1px solid;
  margin: 0 10px;
  text-align: center;
}

main div.qa{
  background-color: #fff;
  width: auto;
  height: 600px;
}

main div.qa article.qa_m{
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

main div.qa article.qa_m section.qa1{
  display: flex;
  justify-content: left;
  width: calc(100% / 2);
  height: 500px;
  background-color: #fff;
}

main div.qa article.qa_m section p{
  font-family: Georgia, 'Times New Roman', Times, serif;
}

main div.qa article.qa_m section.qa1 span::before{
  content: " ";
}


main div.qa article.qa_m section.qa1 p{
  width: calc(100% / 2);
  height: 300px;
}

main div.qa article.qa_m section.qa2{
  display: flex;
  justify-content: left;
  width: calc(100% / 2);
  background-color: #fff;
  height: 500px;
}

main div.qa article.qa_m section.qa2 p{
  width: calc(100% / 2);
  height: 300px;
  text-align: left;
}

main div.news{
  background-color: #fff;
  width: auto;
  height: 275px;
}

main div.news dl{
  height: 200px;
  padding: 10px;
  border: #1c155e solid 1px;
  margin-left: 10px;
  overflow-y: auto;
  font-size: 2rem;
  margin-top: 10px;
}

main div.news div.news_m{
  display: flex;
  padding: 10px;
  border-bottom: 2px dotted #ccc;
  margin-bottom: 5px;
}

main div.news dl div.news_m dt{
  width: 10em;
}

main div.news dl div.news_m dt::after{
  content: "：";
  /* 読み上げブラウザで認識してほしくない等のデザインで入れる文字は、::beforeや::afterなどの疑似要素で入れると良い。 */
}

main div.news dl div.news_m dd{
  width: calc(100% - 10em);
  text-align: justify;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

main div.jyusyo{
  background-color: #fff;
  width: auto;
  height: 500px;
  display: flex;

  align-items: center;
  padding: 10px;
}

main div.jyusyo div.m_jyusyo{
  width: 300px;
  height: 500px;
  background-color: #fff;
}

main div.jyusyo div.m_jyusyo address{
  font-size: 2rem;
}

main div.jyusyo div.g_map iframe{
  width: 500px;
  height: 490px;
}

/* 業務内容メイン */

main div.gyoumnaiyou{
  width: auto;
  height: auto;
}

main div.gyoumnaiyou h2{
  font-size: 3.5rem;
  margin-top: 20px;
}

main div.gyoumnaiyou h3{
  font-size: 2.5rem;
  border-bottom:3px solid #1c155e;
  text-align: center;
  margin-bottom: 50px;
  width: 300px;
  margin: 0 auto;
  padding: 20px;
}

main div.gyoumnaiyou h4{
  font-size: 2.2rem;
  text-align: center;
  border-bottom: #1c155e 2px solid;
}

main div.gyoumnaiyou a{
  font-size: 1.8rem;
  color: #1c155e;
  text-align: center;
}

main div.gyoumnaiyou article.g_kojin{
  display: grid;
  gap:40px;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  margin: auto 0;
  padding-left: 10px;
  padding-right: 10px;
}

main div.gyoumnaiyou article.g_kojin section.g_k_harassment{
  width: 300px;
  height: 300px;
  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kojin section.g_k_gender{
  width: 300px;
  height: 300px;
  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kojin section.g_k_money{
  width: 300px;
  height: 300px;
  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kojin section.g_k_ip{
  width: 300px;
  height: 300px;
  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kigyou_free{
  display: grid;
  gap:50px;
  grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
  justify-content: space-around;

  padding-left: 10px;
  padding-right: 10px;
}

main div.gyoumnaiyou article.g_kigyou_free section.g_kg_f_roudou{
  width: 300px;
  height: 300px;

  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kigyou_free section.g_kg_internet{
  width: 300px;
  height: 300px;
  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kigyou_free section.g_kg_f_ip{
  width: 300px;
  height: 300px;

  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kigyou_free section.g_kg_f_kigyo{
  width: 300px;
  height: 300px;

  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kigyou_free section.g_kg_f_sem{
  width: 300px;
  height: 300px;

  padding-top: 10px;
}

main div.gyoumnaiyou article.g_kojin div p{
  text-align: center;
}

main div.gyoumnaiyou article.g_kigyou_free div p{
  text-align: center;
}

/* メイン　問い合わせ */
main.m_contact{
  width: auto;
  background-color: #fff;
}

main.m_contact h2{
  margin: 50px auto 0;
  text-align: center;
  font-size: 4.5rem;
  width: calc(100% / 3);
}

main.m_contact p.top_mg{
  text-align: center;
  font-size: 2.6rem;
}

main.m_contact small{
  text-align: center;
  font-size: 1.6rem;
  color: #f00;
}


main.m_contact section.toi_main{
  background-color: #fff;
  width: calc(100% / 1.5);
  margin: 0 auto;
  padding: 50px;
}

main.m_contact section.toi_main form dl{
  width: auto;
  margin: 0 auto;
  background-color: #fff;
  font-size: 2.5rem;
  box-shadow: #1c155e 2px 2px 2px 2px;
}


main.m_contact section.toi_main dl div.name_f{
  display: flex;
  justify-content: left;
}

main.m_contact section.toi_main dl div.name_f dt{
  width: 400px;
  border-right: #1c155e solid 2px;
  
}

main.m_contact section.toi_main dl div.name_f dd{
  width: 60%;
  padding-left: 20px;
}

main.m_contact section.toi_main dl div.mail_f div.mail_f_m{
  display: flex;
  justify-content: left;
}

main.m_contact section.toi_main dl div.mail_f div.mail_f_m dt{
  width: 400px;
  border-right: #1c155e solid 2px;
}

main.m_contact section.toi_main dl div.mail_f div.mail_f_m dd{
  width: 60%;
  padding-left: 20px;
}

main.m_contact section.toi_main dl div.mail_f dd.mail_f_s{
  width: auto;
  padding-left: 44.5%;
}

main.m_contact section.toi_main dl div.age_f{
  display: flex;
  justify-content: left;
}

main.m_contact section.toi_main dl div.age_f dt{
  width: 400px;
  border-right: #1c155e solid 2px;
}

main.m_contact section.toi_main dl div.age_f dd{
  width: 60%;
  padding-left: 20px;
}

main.m_contact section.toi_main dl div.gender_f{
  display: flex;
  justify-content: left;
}

main.m_contact section.toi_main dl div.gender_f dt{
  width: 400px;
  border-right: #1c155e solid 2px;
}



main.m_contact section.toi_main dl div.gender_f dd{
  width: 60%;
  padding-left: 20px;
}


main.m_contact section.toi_main div.soushin{
  text-align: center;
}


.m_contact .toi_main input[type="text"],
.m_contact .toi_main input[type="email"]{
  width: 80%;
  height: 30px;
}

.m_contact .toi_main textarea{
  width: 100%;
  height: 300px;
  font-size: 2.5rem;
}

.m_contact .soushin input{
  width: 40%;
  font-size: 3rem;
  background-color: #1c155e;
  color: #fff;
  border:none;
  box-shadow: 2px 2px 2px #666;
  margin: 10px;
}


/* フッター */
footer{
  width: auto;
  color: #fff;
}

footer h4{
  font-size: 1.9rem;
}

footer section.l_nav li a{
  font-size: 1.6rem;
  color: #fff;
}


footer div.f_menu{
  display: flex;
  justify-content: space-between;
  width: auto;
  height: 180px;
  background-color: #1c155e;
}

footer section.l_nav{
  display: flex;
  justify-content: flex-start;
  width:auto;
  height: 180px;
}


footer section.f_jyusyo{
  width: 330px;
  height: 180px;
}


footer h3{
  font-size: 2.4rem;
}

footer div.f_menu section.f_jyusyo address{
  font-size: 1.2rem;
  padding-left: 10px;
}

footer div.f_menu section.l_nav{
  display: flex;
  justify-content: flex-start;
  width: calc(1980px - 330px);
  height: 180px;
}

footer section.l_nav h4{
  padding-left: 10px;
}

footer section.l_nav ul li{
  padding-left: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

footer nav.l_k_nav{
  width: calc(100% / 5);
  height: 180px;
  background-color: #1c155e;
}


footer nav.l_k_f_nav{
  padding-top: 35px;
  width: calc(100% / 5);
  height: 180px;
  background-color:#1c155e;
}



footer nav.l_sem_nav{
  padding-top: 35px;
  width: calc(100% / 5);
  height: 180px;
  background-color: #1c155e;
}

footer nav.sns{
  padding-top: 35px;
  width: calc(100% / 5);
  height: 180px;
  background-color: #1c155e;
}

footer nav.houshin{
  padding-top: 35px;
  width: calc(100% / 5);
  height: 180px;
  background-color: #1c155e;
}

footer section.cpright p{
  text-align: center;
  width:auto;
  height: 40px;
  background-color: #1c155e;
  color: #fff;
}