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

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2018/09/26
* Last update : 2018/09/27
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* first view
*************************************************************************************************************************/
.mainmenu{ margin-bottom: -38px;}

main > div{ background: #f7f7f7; padding: 15px 15px 30px;}
main article{ background: #fff; margin: 0; padding: 15px; position: relative; z-index: 2;}
main article > span{ background: url(../../common/img/voice_num_bg.svg) no-repeat 0 0/contain; width: 70px; height: 70px; position: absolute; top: -2px; left: -2px;}
main article > span::before,
main article > span::after{ content: ""; width: 0; height: 0; position: absolute; border-style: solid;}
main article > span::before{ top: 0; right: -2px; border-width: 0 2px 2px 2px; border-color: transparent transparent #000 transparent;}
main article > span::after{ bottom: -2px; left: 0; border-width: 2px 2px 2px 0; border-color: transparent #000 transparent transparent;}

@media print, screen and (min-width:681px){
  main > div{ padding: 100px 0 70px;}
  main article{ width: 980px; margin: 0 auto 0; padding: 80px 60px;}
  main article > span{ width: 110px; height: 110px; top: -3px; left: -3px;}
  main article > span::before{ right: -3px; border-width: 0 3px 3px 3px;}
  main article > span::after{ bottom: -3px; border-width: 3px 3px 3px 0;}
}


main article .intro{ margin: 0 -15px; padding: 0 15px 30px; border-bottom: 1px solid #d7d7d7;}
main article .intro .profile{ align-self: flex-start; background: #f7f7f7; padding: 20px;}
main article .intro .profile dl dd{ margin: 10px 0 0; font-weight: 500; font-size: 15px; line-height: 1.3; text-align: left;}
main article .intro .profile p{ margin: 15px 0 0; padding: 15px 0 0; border-top: 1px solid #ccc; font-size: 13px;}
main article .intro .text{ align-self: flex-start;  margin: 20px 0 0;}
main article .intro .text h3{ font-weight: 500; font-size: 22px; line-height: 1.3; color: #2e919e; text-align: left;}
main article .intro .text p{ margin: 15px 0 0; line-height: 1.8;}

@media print, screen and (min-width:681px){
  main article .intro{ display: flex; justify-content: space-between; margin: 0 -60px; padding: 0 60px 55px;}
  main article .intro .profile{ order: 2; width: 270px; padding: 30px;}
  main article .intro .profile dl dd{ font-size: 16px;}
  main article .intro .profile p{ margin-top: 18px;}
  main article .intro .text{ order: 1; width: 530px; margin: 0;}
  main article .intro .text h3{ font-size: 28px;}
  main article .intro .text p{ margin-top: 25px}
}


main article .bodytext{ margin: 50px 0 0;}
main article .bodytext h4{ position: relative; font-weight: 500; font-size: 17px; line-height: 1.3; color: #2e919e;}
main article .bodytext h4::before{ content: ""; background: #2e919e; width: 22px; height: 3px; position: absolute; top: 50%; left: -30px; transform: translateY(-50%);}
main article .bodytext div{ margin: 20px 0 0;}
main article .bodytext div p{ line-height: 1.8;}
main article .bodytext div ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 20px 0 0;}
main article .bodytext div ul li{ width: calc(50% - 2px); margin: 4px 0 0;}

@media print, screen and (min-width:681px){
  main article .bodytext h4{ font-size: 20px;}
  main article .bodytext h4::before{ width: 50px; height: 4px; left: -70px;}
  main article .bodytext div{ display: flex; justify-content: space-between; margin-top: 25px;}
  main article .bodytext div p{ line-height: 1.8;}
  main article .bodytext div ul{ width: 100%; margin: -10px 0 0 60px;;}
  main article .bodytext div ul li{ width: 270px; margin-top: 10px;}
}


main > a{ display: block; background: #dd0716; width: calc(100% - 30px); max-width: 980px; margin: 30px auto 0; height: 50px; font-weight: 500; font-size: 16px; line-height: 50px; color: #fff; text-align: center; transition: background .3s;}
main > a:hover{ background: #ef0a21;}

@media print, screen and (min-width:681px){
  main > a{ margin-top: 50px; height: 60px; font-size: 20px; line-height: 60px;}
}




main .nav{ margin: 20px 0 0;}
main .nav li{ margin: 10px 0 0; position: relative;}
main .nav li > span{ background: url(../../common/img/voice_num_bg.svg) no-repeat 0 0/contain; width: 50px; height: 50px; position: absolute; top: -2px; left: -2px; z-index: 2;}
main .nav li > span::before,
main .nav li > span::after{ content: ""; width: 0; height: 0; position: absolute; border-style: solid;}
main .nav li > span::before{ top: 0; right: -2px; border-width: 0 2px 2px 2px; border-color: transparent transparent #000 transparent;}
main .nav li > span::after{ bottom: -2px; left: 0; border-width: 2px 2px 2px 0; border-color: transparent #000 transparent transparent;}
main .nav li a{ display: flex; align-items: center; padding: 10px; border: 4px solid #2e919e; position: relative; transition: background .3s;}
main .nav li a:hover{ background: #2e919e;}
main .nav li a::before{ content: ""; width: 0; height: 0; position: absolute; bottom: 0; right: 0; border-style: solid; border-width: 0 0 12px 12px; border-color: transparent transparent #2e919e transparent; transition: border-color .3s;}
main .nav li a:hover::before{ border-color: transparent transparent #fff transparent;}
main .nav li a div{ min-width: 82px; height: 82px; position: relative; overflow: hidden;}
main .nav li a div img{ width: auto; max-width: none; height: 82px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
main .nav li a dl{ margin: 0 0 0 10px; line-height: 1.3; color: #2e919e; text-align: left; transition: color .3s;}
main .nav li a:hover dl{ color: #fff;}
main .nav li a dl dt{ font-weight: 500; font-size: 14px;}
main .nav li a dl dt br{ display: none;}
main .nav li a dl dd{ margin: 10px 0 0; font-size: 12px;}

@media print, screen and (min-width:681px){
  main .nav{ display: flex; justify-content: space-between; width: 980px; margin: 50px auto 0;}
  main .nav li{ width: 475px; margin: 0;}
  main .nav li > span{ width: 70px; height: 70px;}
  main .nav li a div{ min-width: 126px;}
  main .nav li a dl{ margin-left: 13px;}
  main .nav li a dl dt{ font-size: 17px;}
  main .nav li a dl dt br{ display: block;}
  main .nav li a dl dd{ font-size: 14px;}
}