@charset UTF-8;
/* ================================================ */
/*               全体設定 共通               */
/* ================================================ */

body {
	font-family:   din-2014,a-otf-midashi-go-mb31-pr6n, "游ゴシック体", YuGothic,"游ゴシック", "Yu Gothic","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro","Meiryo", sans-serif, Verdana, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
	background-color: #FFFFFF;
/*	margin-top: 0px;
	margin-bottom: 0px;*/
/*	margin-right: auto;
	margin-left: auto;*/
	font-style: normal;
	font-weight: 600;
}

/*body {
    animation: fadeIn 25s ease 1s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}*/

/* ================================================ */
/*メインコンテンツ*/
/* ================================================ */

/* ================================================ */
/*main visual*/
/* ================================================ */
/*=============================
SP : 画面の横幅が768px以下
===============================*/

@charset "utf-8";

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

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
/*.pc { display: block !important; }*/
/*.sp { display: none !important; }*/


/* ================================================ */
/*ハンバーガーメニュー*/
/* ================================================ */
/*ヘッダーエリア*/



/* ================================================ */
/*main visual*/
/* ================================================ */

.main {
  /*メインカラーを設定*/
	background-color: #FFFFFF;
  /*サブカラーを設定*/
    color: #272727;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 15px;
/*    padding-top: 15px;*/
    padding-bottom: 15px;
    width:92%;
    border-radius: 2px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;

}


.keyimage img {
    display: block;
    margin-bottom: 40px;
    width: 100%;
}

.name_box {
     margin: 40px 25px 40px 25px;

}

.name_box p{
    font-size: 14px;
    letter-spacing: 0.15em;
    line-height: 2em;

}

.my_name p{
    font-size: 22px;

}

.my_name_en {
font-family: 'Roboto', sans-serif;
font-weight: 400;

}

.infomation_box {
     margin: 40px 25px 40px 25px;

}

.infomation_box p{
    font-size: 14px;
    letter-spacing: 0.15em;
    line-height: 2em;

}


.message {
    position: relative;
    display: inline-block;
    /*メインカラーを設定*/
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 30px;
    /*サブカラーを設定*/
    border: solid 2px #272727;
    padding: 16px;
    width: 90%;
    text-align: center;
    border-radius: 3px;
}
.message:before,
.message:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.message:before {
    border: solid 12px transparent;
    /*サブカラーを設定*/
    border-top: solid 12px #272727;
}
.message:after {
    border: solid 14px transparent;
    /*メインカラーを設定*/
    border-top: solid 14px #FFFFFF;
    margin-top: -5px;
    border-radius: 3px;
}
.message p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    letter-spacing: 0.15em;
    line-height: 2em;
}


.icon_box {
/*    margin: 40px 25px 40px 25px;*/
    width:90%;
    margin-left: auto;
    margin-right: auto;
/*    grid-template-columns: 20% 20% 20% 20% 20%;
    grid-template-rows: 33% 33% 33%;*/
}

.icon_box_pack {
  display: inline-block;
  margin: 12px 3.3px 12px 3.3px;
/*  width: 60px;*/
  height: 65px;

}

.icon_box_icon  {

  width: 48px;
  height: 48px;
/*  background: #1da1f2;*/
  border-radius: 50%;
  /*サブカラーを設定*/
  border-color: #272727;
  border: solid;
  border-width: 1.5px;
  text-align: center;
  line-height: 48px;

}

a.btn-sns {
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  padding: 0;
  letter-spacing: 0;
    /*サブカラーを設定*/
  color: #272727;
}

a.btn-sns:hover {
    /*サブカラーを設定*/
  color: #272727;
}

.icon_box_text p{
  font-family: din-2014, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 10px;
  margin-top:5px;
  margin-right: 0;
  margin-left:0;
  width: 52px;
}





}


@media screen and (min-width: 769px) {

.main {
  /*メインカラーを設定*/
  background-color: #FFFFFF;
  /*サブカラーを設定*/
    color: #272727;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 15px;
/*    padding-top: 15px;*/
    padding-bottom: 15px;
    /*PCはここだけ450pxに変更*/
    width:450px;
    border-radius: 2px;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;

}


.keyimage img {
    display: block;
    margin-bottom: 40px;
    width: 100%;
}

.name_box {
     margin: 50px 25px 40px 25px;

}

.name_box p{
    font-size: 14px;
    letter-spacing: 0.15em;
    line-height: 2em;

}

.my_name p{
    font-size: 22px;

}

.my_name_en {
font-family: 'Roboto', sans-serif;
font-weight: 400;

}

.infomation_box {
     margin: 50px 25px 50px 25px;

}

.infomation_box p{
    font-size: 14px;
    letter-spacing: 0.15em;
    line-height: 2em;

}


.message {
    position: relative;
    display: inline-block;
    /*メインカラーを設定*/
    background-color: #FFFFFF;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    margin-bottom: 30px;
    /*サブカラーを設定*/
    border: solid 2px #272727;
    padding: 16px;
    width: 90%;
    text-align: center;
    border-radius: 3px;
}
.message:before,
.message:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
.message:before {
    border: solid 12px transparent;
    /*サブカラーを設定*/
    border-top: solid 12px #272727;
}
.message:after {
    border: solid 14px transparent;
    /*メインカラーを設定*/
    border-top: solid 14px #FFFFFF;
    margin-top: -5px;
    border-radius: 3px;
}
.message p {
    margin: 0;
    padding: 0;
    font-size: 14px;
    letter-spacing: 0.15em;
    line-height: 2em;
}


.icon_box {
  display: grid;
 /* margin: 40px 25px 40px 25px;*/
  width:90%;
  margin-left: auto;
  margin-right: auto;
  grid-template-columns: 20% 20% 20% 20% 20%;
  grid-template-rows: 50% 50% ;
}

.icon_box_pack {
  display: inline-block;
  margin: 12px 8px 12px 8px;
/*  width: 60px;*/
  height: 65px;

}

.icon_box_icon  {

  width: 48px;
  height: 48px;
/*  background: #1da1f2;*/
  border-radius: 50%;
  /*サブカラーを設定*/
  border-color: #272727;
  border: solid;
  border-width: 1.5px;
  text-align: center;
  line-height: 48px;

}

a.btn-sns {
  font-size: 1.5rem;
  width: 48px;
  height: 48px;
  padding: 0;
  letter-spacing: 0;
    /*サブカラーを設定*/
  color: #272727;
}

a.btn-sns:hover {
    /*サブカラーを設定*/
  color: #272727;
}

.icon_box_text p{
  font-family: din-2014, sans-serif;
  font-weight: 600;
  font-style: normal;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 10px;
  margin-top:5px;
  margin-right: 0;
  margin-left:0;
  width: 52px;
}






}