@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
font-weight: 500;
text-align:left;
color:#fff;
background: #fff;
min-width:750px;
}
@media screen and (max-width:750px){
html,body{ font-size:2.66vw; min-width:240px; max-width:750px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
figure{margin:0 auto; text-align:center;}
figure.img{ margin: 30px auto;}
figure.img:first-child{ margin-top: 0;}
figure.img:last-child{ margin-bottom: 0;}
figure.img img{ margin: 0 auto; padding:8px; background:#fff; box-shadow:rgba(0, 0, 0, 0.1) 0 0 5px 2px;}
@media screen and (max-width:750px){
figure.img img{ padding: 1.25vw;}
}


/*txt*/
p{ text-align: justify; line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}
.black{ color:#333;}
.gy{ color:#aaa;}
.red{ color:#ff5858;}
.blue{ color:#326496;}
.yellow{ color:#f0d278;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{}

/*フッター*/
footer{}
footer p{ text-align: center; font-size: 1rem; padding: 1em;}
@media screen and (max-width:750px){
}

/*メイン*/
#content{ margin: auto; max-width: 750px; background: #3296c8; overflow:hidden; box-shadow:rgba(0, 0, 0, 0.1) 0 0 10px 5px;}
section{ width:100%; margin:120px auto;}
.maincontent{ padding:0; margin:0 auto; width:690px;}
@media screen and (max-width:750px){
#content{ max-width: 100%;}
section{ margin:15% auto;}
.maincontent{ padding:0; margin:0 auto; width:92.5%;}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.33em;}
h2.tit_h2{ border-top: 12px double #3296c8; border-bottom: 12px double #3296c8; background: #fff; color: #3296c8; text-align: center; font-size: 2.4rem; padding: 0.5em 0; margin-bottom: 30px;}
h3.tit_h3{ text-align: center; font-size: 2.4rem;}
@media screen and (max-width:750px){
h2.tit_h2{ border-top: 1.875vw double #3296c8; border-bottom: 1.875vw double #3296c8; font-size: 2.4rem; margin-bottom: 5%;}
h3.tit_h3{ font-size: 2.4rem;}
}

/*btn*/
figure.btn{ margin: 60px 30px;}
figure.btn a{ display: flex; align-items: center; justify-content: center; background: #329632; color: #fff; font-size: 2.4rem; font-weight: bold; line-height: 1.25em; letter-spacing: 0.1em; padding: 0.5em; border-radius: 80px; box-shadow:rgba(0, 0, 0, 0.2) 0 0 10px 5px; position: relative; transition: 0.3s;}
figure.btn a:after{ content: ""; width: 100%; height: 50%; background: rgba(255,255,255,0.1); position: absolute; left: 0; top: 0; border-radius: 80px 80px 0 0;}
figure.btn a:hover{ opacity: 0.7;}
figure.btn a i{ font-size: 3.2rem; margin-right: 0.25em;}
figure.btn a strong{ font-weight: 900;}
@media screen and (max-width:750px){
figure.btn{ margin: 7.5% 3.75%;}
figure.btn a{ font-size: 2.4rem; border-radius: 10vw;}
figure.btn a:after{ border-radius: 10vw 10vw 0 0;}
}

figure.btn a{ animation: btn linear 1.0s alternate infinite;}
@media screen and (max-width:750px){
figure.btn a{ animation: btn_smp linear 1.0s alternate infinite;}
}
@keyframes btn{
0%{ top: -10px;}
100%{ top: 10px;}
}
@keyframes btn_smp{
0%{ top: -1.875vw;}
100%{ top: 1.875vw;}
}



/*cv*/
.cv{ margin: 60px auto;}
.cv h2{ text-align: center; font-size: 2.8rem; padding-bottom: 0.25em; border-bottom: 2px solid #fff; margin-bottom: 60px;}
.cv h2 span{ display: block; font-size: 2rem; line-height: 1.33em;}
.cv ul{ display: flex; justify-content: space-between;}
.cv ul li{ width: 320px;}
.cv ul li h4{ display: flex; align-items: center; justify-content: center; text-align: center; border: 2px solid #fff; width: 300px; margin: auto; font-size: 1.6rem; line-height: 1.25em; padding: 0.5em 0 0.66em; margin-top: 20px; position: relative;}
.cv ul li:nth-child(1) h4:after{ content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #ffffff; border-width: 20px 0px 20px 20px; position: absolute; right: -50px; top: 50%; transform: translateY(-50%);}
@media screen and (max-width:750px){
.cv{ margin: 7.5% auto;}
.cv h2{ font-size: 2.8rem; margin-bottom: 7.5%;}
.cv h2 span{ font-size: 2rem;}
.cv ul li{ width: calc(50% - 2.5vw);}
.cv ul li h4{ width: calc(100% - 2.5vw); font-size: 1.6rem; margin-top: 5%;}
.cv ul li:nth-child(1) h4:after{ border-width: 2.5vw 0px 2.5vw 2.5vw; right: -5.75vw;}
}


/*lead*/
#lead ul{ margin: 30px auto; display: flex; justify-content: space-between;}
#lead ul li{ width: 320px;}
#lead ul li h4{ display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; border: 2px solid #fff; width: 300px; margin: auto; font-size: 1.6rem; line-height: 1.25em; position: relative;}
#lead ul li h4 span{ width: 100%; padding: 0.25em 0 0.33em; background: #fff; color: #3296c8;}
#lead ul li h4 strong{ padding: 0.33em 0 0.5em;}
#lead ul li:nth-child(1) h4:after{ content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #ffffff; border-width: 20px 0px 20px 20px; position: absolute; right: -50px; top: 50%; transform: translateY(-50%);}
@media screen and (max-width:750px){
#lead ul{ margin: 5% auto;}
#lead ul li{ width: calc(50% - 5vw);}
#lead ul li h4{width: 100%; font-size: 1.6rem;}
#lead ul li:nth-child(1) h4:after{ border-width: 2.5vw 0px 2.5vw 2.5vw; right: -6.875vw;}
}



/*txt*/
p.txt{ text-align: center; font-size: 1.6rem;}
@media screen and (max-width:750px){
p.txt{ font-size: 1.75rem;}
}



/*list*/
.list{ margin: 30px auto;}
.list ul li{ padding: 0.5em; border-bottom: 2px dotted #fff; font-size: 1.6rem; letter-spacing: 0.05em; font-weight: bold;}
.list ul li i{ margin-right: 0.25em;}
.list ul li:first-child{ border-top: 2px dotted #fff;}
.list p.etc{ text-align: right; font-size: 1.6rem;}
@media screen and (max-width:750px){
.list{ margin: 30px auto;}
.list ul li{ padding: 0.5em; border-bottom: 2px dotted #fff; font-size: 1.6rem; letter-spacing: 0.05em; font-weight: bold;}
.list ul li i{ margin-right: 0.25em;}
.list ul li:first-child{ border-top: 2px dotted #fff;}
.list p.etc{ text-align: right; font-size: 1.6rem;}
}



/*no_skill*/
figure.no_skill img{ border-radius: 30px;}
@media screen and (max-width:750px){
figure.no_skill img{ border-radius: 5vw;}
}



@media print, screen and (min-width:751px){
.smp{ display:none !important;}
}
@media screen and (max-width:750px){
.pc{ display:none !important;}
}