/* アナウンサー編 ============================== */ /* h2 ============================== */ .titleArea h2{ width: 256px; height: 170px; background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url(../img/try_ana/h2.png?2405); text-indent: -9999px; margin: 0 auto; } @media all and (min-width: 768px) { .titleArea h2{ width: 275px; height: 200px;} } @media all and (max-width: 767px) { .titleArea h2{ width:150px; height: 110px;} } /* list contents ============================== */ ul.listArea { letter-spacing: -.4em;} ul.listArea li { display: inline-block; vertical-align: top; letter-spacing: 0em; } ul.listArea li figure span, .profile figure span, .goalArea .icon figure span { display: block; position: relative; background-size: 100%; background-position: center center; height: 0; padding: 100% 0 0; } ul.listArea li figure span img, .profile figure span img, .goalArea .icon figure span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } ul.listArea li figure, .profile figure, .goalArea .icon figure { width: 100%; margin: 0; box-sizing: border-box; } .listArea a:hover figure { opacity:0.8;} ul.listArea li h3 { /*color:#fff; text-align: center; padding: 0.5em 0;*/ display: none;} /*ul.listArea li#ana_01 h3 { background-color: #e4011e; } ul.listArea li#ana_02 h3 { background-color: #d6a600; } ul.listArea li#ana_03 h3 { background-color: #1b973a; } ul.listArea li#ana_04 h3 { background-color: #c50e28; } ul.listArea li#ana_05 h3 { background-color: #e83418; } ul.listArea li#ana_06 h3 { background-color: #00a6d9; } ul.listArea li#ana_07 h3 { background-color: #fabd00; } ul.listArea li#ana_08 h3 { background-color: #970a31; } ul.listArea li#ana_09 h3 { background-color: #ec6a06; } ul.listArea li#ana_10 h3 { background-color: #dc097b; } ul.listArea li#ana_11 h3 { background-color: #f5a20b; } ul.listArea li#ana_12 h3 { background-color: #d39206; } ul.listArea li#ana_13 h3 { background-color: #407936; } ul.listArea li#ana_14 h3 { background-color: #0075ba; } ul.listArea li#ana_15 h3 { background-color: #28a838; } ul.listArea li#ana_16 h3 { background-color: #004c88; } ul.listArea li#ana_17 h3 { background-color: #023067; }*/ @media all and (min-width: 768px) { .wrap {width:1004px;} ul.listArea { padding: 20px 0;} ul.listArea li {width:310px; margin-bottom: 24px;} ul.listArea li:nth-child(3n-1) {margin: 0 24px; } ul.listArea li h3 { font-size: 1.1em;} } @media all and (max-width: 767px) { .wrap {width:98%; margin: 0 auto;} ul.listArea li {width:46%; margin: 0 2%; margin-bottom: 4%;} } /* detail contents ============================== */ .profile .profArea .profBlock {border: solid 3px #d9d9d9; display: flex; justify-content: center; align-items: center;} .profile .profArea .profBlock .profBox { margin: auto auto; position: relative;} .profile .profArea .profBlock .profBox h3 {margin: 0 auto; } .profile .profArea .profBlock .profBox .charge {margin: 15px auto; padding: 0 5px; } .profile .profArea .profBlock .profBox .charge h4 { padding-bottom: 5px;} .profile .profArea .profBlock .profBox .charge .txt { font-size: 0.85em; padding-bottom: 0.5em;} .profile .profArea .profBlock .profBox .charge .txt .stxt{ font-size: 0.9em;} .profile .profArea .profBlock .profBox .btn a { display: block; border-radius: 8px; background-repeat: no-repeat; background-position: center center; background-image: url(../img/try_ana/btn_prof.png?2405); background-size: 145px 18px; width: 170px; height: 40px; text-indent: -9999px; } .profile .profArea .profBlock .profBox .btn a:hover { opacity:0.8;} @media all and (min-width: 768px) { .profile { letter-spacing: -.4em; padding:10px 0 20px;} .profile .photo{ width:560px; display: inline-block; letter-spacing: 0em; vertical-align: top;} .profile .profArea{ width:420px; height: 554px; display: inline-block; letter-spacing: 0em; vertical-align: top;} .profile .profArea .profBlock { width: 100%; height: 100%; } .profile .profArea .profBlock .profBox { width: 98%; height: 98.3%; } .profile .profArea .profBlock .profBox h3 { width: 370px; font-size: 2.0em; padding: 28px 5px 12px; } .profile .profArea .profBlock .profBox h3 ruby > rt { font-size: 40%; } .profile .profArea .profBlock .profBox .charge { width: 370px;} .profile .profArea .profBlock .profBox .btn { position: absolute; bottom:15px; right: 15px;} } @media all and (max-width: 767px) { .profile { width: 95%; max-width: 560px; margin: 0 auto 15px;} .profile .photo{ width:100%;} .profile .profArea{ width:100%;} .profile .profArea .profBlock { padding: 2px 0;} .profile .profArea .profBlock .profBox { width: 92%; padding: 0 3% } .profile .profArea .profBlock .profBox h3 { font-size: 1.8em; padding: 30px 5px 15px;} .profile .profArea .profBlock .profBox .charge .txt {} .profile .profArea .profBlock .profBox .btn { margin: 0 auto; width: 170px; padding-bottom: 20px; } } .goalArea .wrap { border: solid 1px #d9d9d9; padding: 0 0 30px;} .goalArea h3 { text-align: center; padding: 15px 0; } .goalArea .icon { /*margin: 0 auto; padding: 30px 20px;*/ display: none;} .goalArea .goal { text-align: center;} .goalArea .goal h4{padding: 0.5em; margin-bottom: 1em; font-size: 1.5em; color: #fff; } .goalArea .btn { padding: 20px 30px;} .goalArea .btn a { display: block; border-radius: 8px; background-color: #fe829a; background-repeat: no-repeat; background-position: center center; background-image: url(../img/try_ana/btn_detail.png); background-size: 140px 19px; width: 170px; height: 40px; text-indent: -9999px; margin: 0 auto; } .goalArea .btn a:hover { opacity:0.8;} .goalArea .perspective { margin: 0 auto;} .goalArea .perspective h4 { padding: 20px 20px 5px; font-size: 1.1em; } .goalArea .perspective .txt{ padding: 0 20px 20px;} @media all and (min-width: 768px) { .goalArea { padding-bottom: 60px;} .goalArea h3 { font-size: 1.3em;} .goalArea .icon { width: 280px;} .goalArea .goal .txt {font-size: 1.2em; } .goalArea .perspective {width: 880px;} } @media all and (max-width: 767px) { .goalArea { padding-bottom: 20px;} .goalArea .wrap { width: 93%; padding: 0 0 15px;} .goalArea h3 { font-size: 1.1em;} .goalArea .icon { width: 180px;} .goalArea .goal h4{padding: 0.5em; margin-bottom: 1em; font-size: 1.2em;} .goalArea .goal .txt {font-size: 1.1em; } .goalArea .perspective {width: 90%;} .goalArea .perspective h4 { padding: 15px 15px 5px; font-size: 1.1em; } .goalArea .perspective .txt{ padding: 0 15px 15px; font-size: 0.9em;} } #anaList { border-top:solid 1px #d9d9d9} @media all and (min-width: 768px) { #anaList .wrap {width:1004px;} #anaList ul.listArea { padding: 30px 0 20px;} #anaList ul.listArea li {width:186px; margin:0 7px 14px;} #anaList ul.listArea li:nth-child(3n-1) {margin:0 7px 14px; } #anaList ul.listArea li h3 { font-size: 0.9em;} } @media all and (max-width: 767px) { ul.listArea li {width:29%; margin: 0 2%; margin-bottom: 4%;} #anaList ul.listArea { padding: 15px 0 0;} #anaList ul.listArea li h3 { font-size: 0.85em;} } #ana_01 .profile .profArea .profBlock .profBox { border: solid 2px #e4011e;} #ana_01 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #e4011e; } #ana_01 .profile .profArea .profBlock .profBox .charge h4 ,#ana_01 .goalArea .perspective h4 { color:#e4011e;} #ana_01 .profile .profArea .profBlock .profBox .btn a, #ana_01 .goalArea .goal h4 {background-color:#e4011e; } #ana_01 .goalArea h3 {border-bottom: solid 1px #e4011e; color:#e4011e; } #ana_01 .goalArea .perspective { border: dotted 1px #e4011e;} #ana_01 .movie h3 {color:#e4011e; } #ana_02 .profile .profArea .profBlock .profBox { border: solid 2px #d6a600;} #ana_02 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #d6a600; } #ana_02 .profile .profArea .profBlock .profBox .charge h4 ,#ana_02 .goalArea .perspective h4 { color:#d6a600;} #ana_02 .profile .profArea .profBlock .profBox .btn a, #ana_02 .goalArea .goal h4 {background-color:#d6a600; } #ana_02 .goalArea h3 {border-bottom: solid 1px #d6a600; color:#d6a600; } #ana_02 .goalArea .perspective { border: dotted 1px #d6a600;} #ana_02 .movie h3 {color:#d6a600; } #ana_03 .profile .profArea .profBlock .profBox { border: solid 2px #1b973a;} #ana_03 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #1b973a; } #ana_03 .profile .profArea .profBlock .profBox .charge h4 ,#ana_03 .goalArea .perspective h4 { color:#1b973a;} #ana_03 .profile .profArea .profBlock .profBox .btn a, #ana_03 .goalArea .goal h4 {background-color:#1b973a; } #ana_03 .goalArea h3 {border-bottom: solid 1px #1b973a; color:#1b973a; } #ana_03 .goalArea .perspective { border: dotted 1px #1b973a;} #ana_03 .movie h3 {color:#1b973a; } #ana_04 .profile .profArea .profBlock .profBox { border: solid 2px #c50e28;} #ana_04 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #c50e28; } #ana_04 .profile .profArea .profBlock .profBox .charge h4 ,#ana_04 .goalArea .perspective h4 { color:#c50e28;} #ana_04 .profile .profArea .profBlock .profBox .btn a, #ana_04 .goalArea .goal h4 {background-color:#c50e28; } #ana_04 .goalArea h3 {border-bottom: solid 1px #c50e28; color:#c50e28; } #ana_04 .goalArea .perspective { border: dotted 1px #c50e28;} #ana_04 .movie h3 {color:#c50e28; } #ana_05 .profile .profArea .profBlock .profBox { border: solid 2px #e83418;} #ana_05 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #e83418; } #ana_05 .profile .profArea .profBlock .profBox .charge h4 ,#ana_05 .goalArea .perspective h4 { color:#e83418;} #ana_05 .profile .profArea .profBlock .profBox .btn a, #ana_05 .goalArea .goal h4 {background-color:#e83418; } #ana_05 .goalArea h3 {border-bottom: solid 1px #e83418; color:#e83418; } #ana_05 .goalArea .perspective { border: dotted 1px #e83418;} #ana_05 .movie h3 {color:#e83418; } #ana_06 .profile .profArea .profBlock .profBox { border: solid 2px #00a6d9;} #ana_06 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #00a6d9; } #ana_06 .profile .profArea .profBlock .profBox .charge h4 ,#ana_06 .goalArea .perspective h4 { color:#00a6d9;} #ana_06 .profile .profArea .profBlock .profBox .btn a, #ana_06 .goalArea .goal h4 {background-color:#00a6d9; } #ana_06 .goalArea h3 {border-bottom: solid 1px #00a6d9; color:#00a6d9; } #ana_06 .goalArea .perspective { border: dotted 1px #00a6d9;} #ana_06 .movie h3 {color:#00a6d9; } #ana_07 .profile .profArea .profBlock .profBox { border: solid 2px #fabd00;} #ana_07 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #fabd00; } #ana_07 .profile .profArea .profBlock .profBox .charge h4 ,#ana_07 .goalArea .perspective h4 { color:#fabd00;} #ana_07 .profile .profArea .profBlock .profBox .btn a, #ana_07 .goalArea .goal h4 {background-color:#fabd00; } #ana_07 .goalArea h3 {border-bottom: solid 1px #fabd00; color:#fabd00; } #ana_07 .goalArea .perspective { border: dotted 1px #fabd00;} #ana_07 .movie h3 {color:#fabd00; } #ana_08 .profile .profArea .profBlock .profBox { border: solid 2px #970a31;} #ana_08 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #970a31; } #ana_08 .profile .profArea .profBlock .profBox .charge h4 ,#ana_08 .goalArea .perspective h4 { color:#970a31;} #ana_08 .profile .profArea .profBlock .profBox .btn a, #ana_08 .goalArea .goal h4 {background-color:#970a31; } #ana_08 .goalArea h3 {border-bottom: solid 1px #970a31; color:#970a31; } #ana_08 .goalArea .perspective { border: dotted 1px #970a31;} #ana_08 .movie h3 {color:#970a31; } #ana_09 .profile .profArea .profBlock .profBox { border: solid 2px #ec6a06;} #ana_09 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #ec6a06; } #ana_09 .profile .profArea .profBlock .profBox .charge h4 ,#ana_09 .goalArea .perspective h4 { color:#ec6a06;} #ana_09 .profile .profArea .profBlock .profBox .btn a, #ana_09 .goalArea .goal h4 {background-color:#ec6a06; } #ana_09 .goalArea h3 {border-bottom: solid 1px #ec6a06; color:#ec6a06; } #ana_09 .goalArea .perspective { border: dotted 1px #ec6a06;} #ana_09 .movie h3 {color:#ec6a06; } #ana_10 .profile .profArea .profBlock .profBox { border: solid 2px #dc097b;} #ana_10 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #dc097b; } #ana_10 .profile .profArea .profBlock .profBox .charge h4 ,#ana_10 .goalArea .perspective h4 { color:#dc097b;} #ana_10 .profile .profArea .profBlock .profBox .btn a, #ana_10 .goalArea .goal h4 {background-color:#dc097b; } #ana_10 .goalArea h3 {border-bottom: solid 1px #dc097b; color:#dc097b; } #ana_10 .goalArea .perspective { border: dotted 1px #dc097b;} #ana_10 .movie h3 {color:#dc097b; } #ana_11 .profile .profArea .profBlock .profBox { border: solid 2px #f5a20b;} #ana_11 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #f5a20b; } #ana_11 .profile .profArea .profBlock .profBox .charge h4 ,#ana_11 .goalArea .perspective h4 { color:#f5a20b;} #ana_11 .profile .profArea .profBlock .profBox .btn a, #ana_11 .goalArea .goal h4 {background-color:#f5a20b; } #ana_11 .goalArea h3 {border-bottom: solid 1px #f5a20b; color:#f5a20b; } #ana_11 .goalArea .perspective { border: dotted 1px #f5a20b;} #ana_11 .movie h3 {color:#f5a20b; } #ana_12 .profile .profArea .profBlock .profBox { border: solid 2px #d39206;} #ana_12 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #d39206; } #ana_12 .profile .profArea .profBlock .profBox .charge h4 ,#ana_12 .goalArea .perspective h4 { color:#d39206;} #ana_12 .profile .profArea .profBlock .profBox .btn a, #ana_12 .goalArea .goal h4 {background-color:#d39206; } #ana_12 .goalArea h3 {border-bottom: solid 1px #d39206; color:#d39206; } #ana_12 .goalArea .perspective { border: dotted 1px #d39206;} #ana_12 .movie h3 {color:#d39206; } #ana_13 .profile .profArea .profBlock .profBox { border: solid 2px #407936;} #ana_13 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #407936; } #ana_13 .profile .profArea .profBlock .profBox .charge h4 ,#ana_13 .goalArea .perspective h4 { color:#407936;} #ana_13 .profile .profArea .profBlock .profBox .btn a, #ana_13 .goalArea .goal h4 {background-color:#407936; } #ana_13 .goalArea h3 {border-bottom: solid 1px #407936; color:#407936; } #ana_13 .goalArea .perspective { border: dotted 1px #407936;} #ana_13 .movie h3 {color:#407936; } #ana_14 .profile .profArea .profBlock .profBox { border: solid 2px #0075ba;} #ana_14 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #0075ba; } #ana_14 .profile .profArea .profBlock .profBox .charge h4 ,#ana_14 .goalArea .perspective h4 { color:#0075ba;} #ana_14 .profile .profArea .profBlock .profBox .btn a, #ana_14 .goalArea .goal h4 {background-color:#0075ba; } #ana_14 .goalArea h3 {border-bottom: solid 1px #0075ba; color:#0075ba; } #ana_14 .goalArea .perspective { border: dotted 1px #0075ba;} #ana_14 .movie h3 {color:#0075ba; } #ana_15 .profile .profArea .profBlock .profBox { border: solid 2px #28a838;} #ana_15 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #28a838; } #ana_15 .profile .profArea .profBlock .profBox .charge h4 ,#ana_15 .goalArea .perspective h4 { color:#28a838;} #ana_15 .profile .profArea .profBlock .profBox .btn a, #ana_15 .goalArea .goal h4 {background-color:#28a838; } #ana_15 .goalArea h3 {border-bottom: solid 1px #28a838; color:#28a838; } #ana_15 .goalArea .perspective { border: dotted 1px #28a838;} #ana_15 .movie h3 {color:#28a838; } #ana_16 .profile .profArea .profBlock .profBox { border: solid 2px #004c88;} #ana_16 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #004c88; } #ana_16 .profile .profArea .profBlock .profBox .charge h4 ,#ana_16 .goalArea .perspective h4 { color:#004c88;} #ana_16 .profile .profArea .profBlock .profBox .btn a, #ana_16 .goalArea .goal h4 {background-color:#004c88; } #ana_16 .goalArea h3 {border-bottom: solid 1px #004c88; color:#004c88; } #ana_16 .goalArea .perspective { border: dotted 1px #004c88;} #ana_16 .movie h3 {color:#004c88; } #ana_17 .profile .profArea .profBlock .profBox { border: solid 2px #023067;} #ana_17 .profile .profArea .profBlock .profBox h3 {border-bottom: solid 2px #023067; } #ana_17 .profile .profArea .profBlock .profBox .charge h4 ,#ana_17 .goalArea .perspective h4 { color:#023067;} #ana_17 .profile .profArea .profBlock .profBox .btn a, #ana_17 .goalArea .goal h4 {background-color:#023067; } #ana_17 .goalArea h3 {border-bottom: solid 1px #023067; color:#023067; } #ana_17 .goalArea .perspective { border: dotted 1px #023067;} #ana_16 .movie h3 {color:#023067; } /* ------------ starting ------------*/ #starting h4::before{ display: inline-block; content: ""; background-image: url(../img/fukidashi.png); width: 20px; height: 50px; background-size: cover; position: absolute; top: 0; left: 0; } #starting h4::after{ display: inline-block; content: ""; background-image: url(../img/fukidashi.png); width: 20px; height: 50px; background-size: cover; position: absolute; top: 0; right: 0; transform: scale(-1, 1); } #starting .inner .comment{ position: relative; } #starting figure span img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } @media all and (min-width: 768px) { #starting{ width: 980px; margin: 0 auto; padding: 20px 0 40px; } #starting .cover{ width: 100%; display: flex; align-items:flex-start; } #starting .inner{ width: 100%; text-align: center; } #starting .inner h4{ font-size: 1.5em; margin-bottom: 35px; position: relative; padding: 10px 30px 0; display: inline-block; } #starting .inner .comment{ width: 100%; margin: 0 auto; border-radius: 15px; color: #000; padding: 30px; box-sizing: border-box; text-align: left; position: relative; } #starting .inner .comment h5{ font-size: 1.4em; margin-bottom: 10px; } #starting .inner .comment p{ font-size: 110%; line-height: 1.6; } #starting .inner .comment p.paragraph {padding-right: 0px; /*padding-top: 1em;*/} } @media all and (max-width: 767px) { #starting{ width:95%; margin: 0 auto; padding: 0 0 20px; } #starting .inner h4{ width: 90%; font-size:1.3em; margin:0 auto 20px; padding: 10px 0; position: relative; text-align: center; line-height: 1.2; } #starting .inner .comment{ width: 100%; margin: 0 auto; border-radius: 15px; color: #000; padding: 20px; box-sizing: border-box; } #starting .inner .comment h5{ font-size: 1.1em; line-height: 1.4em; margin-bottom: 10px; } #starting .inner .comment p{ font-size: 90%; line-height: 1.6; padding-bottom: 10px; } } #ana_01 #contact h4, #ana_01 #starting .comment { border: solid 3px #e4011e; } #ana_02 #contact h4, #ana_02 #starting .comment { border: solid 3px #d6a600; } #ana_03 #contact h4, #ana_03 #starting .comment { border: solid 3px #1b973a; } #ana_04 #contact h4, #ana_04 #starting .comment { border: solid 3px #c50e28; } #ana_05 #contact h4, #ana_05 #starting .comment { border: solid 3px #e83418; } #ana_06 #contact h4, #ana_06 #starting .comment { border: solid 3px #00a6d9; } #ana_07 #contact h4, #ana_07 #starting .comment { border: solid 3px #fabd00; } #ana_08 #contact h4, #ana_08 #starting .comment { border: solid 3px #970a31; } #ana_09 #contact h4, #ana_09 #starting .comment { border: solid 3px #ec6a06; } #ana_10 #contact h4, #ana_10 #starting .comment { border: solid 3px #dc097b; } #ana_11 #contact h4, #ana_11 #starting .comment { border: solid 3px #f5a20b; } #ana_12 #contact h4, #ana_12 #starting .comment { border: solid 3px #d39206; } #ana_13 #contact h4, #ana_13 #starting .comment { border: solid 3px #407936; } #ana_14 #contact h4, #ana_14 #starting .comment { border: solid 3px #0075ba; } #ana_15 #contact h4, #ana_15 #starting .comment { border: solid 3px #28a838; } #ana_16 #contact h4, #ana_16 #starting .comment { border: solid 3px #004c88; } #ana_17 #contact h4, #ana_17 #starting .comment { border: solid 3px #023067; } #ana_01 #starting h4 { color: #e4011e; } #ana_02 #starting h4 { color: #d6a600; } #ana_03 #starting h4 { color: #1b973a; } #ana_04 #starting h4 { color: #c50e28; } #ana_05 #starting h4 { color: #e83418; } #ana_06 #starting h4 { color: #00a6d9; } #ana_07 #starting h4 { color: #fabd00; } #ana_08 #starting h4 { color: #970a31; } #ana_09 #starting h4 { color: #ec6a06; } #ana_10 #starting h4 { color: #dc097b; } #ana_11 #starting h4 { color: #f5a20b; } #ana_12 #starting h4 { color: #d39206; } #ana_13 #starting h4 { color: #407936; } #ana_14 #starting h4 { color: #0075ba; } #ana_15 #starting h4 { color: #28a838; } #ana_16 #starting h4 { color: #004c88; } #ana_17 #starting h4 { color: #023067; } @media all and (min-width: 768px) { } @media all and (max-width: 767px) { }