@charset "UTF-8";

html {
  font-size: 62.5%;/*多くのブラウザは基本16pxなので、ここでは10pxを規定値として用いる。以降フォントサイズの指定はremを用いた相対指定で行う。*/
}

*, *::after, *::before {
  box-sizing: border-box;
}

a {
  text-decoration-line: none; /* 下線を無効化 */
  color: inherit; /* 親要素の色を継承 */
}

.hidden {
  display: none;
}

.clearfix::after {
  content: '';
  display: block;
  clear: both;
}

/*ここまで汎用*/
/*ここから個別*/

body {
  margin: 0;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.header {
  background-color: #e5abbe;
  min-width: 100%;
  height: 80px;
}

.headerTop {
  height: 10px;
}

.logo {
  font-size: 3.4rem;
  text-align: left;
  margin: 0 0 0 5px;
}

.logo a {
  font-family: sans-serif;
  color: #feffc7;
  white-space: nowrap;/*折返しを禁止*
  overflow: hidden;/*溢れた部分は非表示<-よく考えたらこれいらねえや*/
}



.wrapper {
  margin: auto;
  max-width: 800px;
}

.about {
  font-size: 1.6rem;
}

.about,
.adress {
  margin: 3px 5px 0;
  text-align: end;
}

.choiceIdol {
  display: flex;
  margin-top: 10px;
}

#callIdolSelect,
#calledIdolSelect {
  font-size: 1.6rem;
}

/*
.call {
}

.called {
}
*/

.idolOption {
  font-size: 1.4rem;
}

.cuteLabel {
  background-color: #ffefff;
}

.cuteOption {
  background-color: #ffefff;
}

.coolLabel {
  background-color: #efffff;
}

.coolOption {
  background-color: #efffff;
}

.passionLabel {
  background-color: #ffffef;
}

.passionOption {
  background-color: #ffffef;
}

.supporterLabel {
  background-color: #f7fff7;
}

.supporterOption {
  background-color: #f7fff7;
}

.choiceIdol .arrow {
  font-size: 1.5rem;
  margin: auto 10px 0;/*下部揃え*/
}

.submit {
  margin: 0 5px;
}

.submit input {
  height: 21px;
}


#displayInfo {
  margin: 20px 15px 0 0;
  width: auto;
  font-size: 1.6rem;
  display: flex;
  background-color: #f7f7f7;
}




.result {
  margin: 15px;
  font-size: 1.6em;
}

.resultParts {
  margin-top: 15px;
  padding: 5px 15px;
  background-color: #f7f7f7;
  border-radius: 10px;
}

/*
.resultPartsInfo {
}
*/

.callNameBox {
  display: flex;
}

.callName {
  margin: 5px 10px;
  padding-left: 15px;
  font-size: 2.5rem;
  color: #0e0e0e;
  text-decoration: underline;/*下線挿入*/
  text-decoration-thickness: 10px;/*太く*/
  text-decoration-color: #e0e0e0;
  text-underline-offset: -3px;/*上に3px押し上げる*/
}

.callNameFull {
  font-size: 1rem;
  margin-top: auto;
}

.resultPartsInfoRightSide {
  display: flex;
  flex-direction: row-reverse;
  order: 1;/*clearfixの::after要素が認識されて真ん中に来てしまうので、強制的に順序変更*/
}

.dateInfo {
  margin: 0, 5px;
}

.resultSourceType {
  height: 35px;
  padding: 3px 5px;
  flex: none;
  text-align: center;
}

.resultSourceType.gekijo {
  color: #497ECF;
  font-family: 'Meiryo';
  font-weight: bold;
/*  text-shadow:/*影を重ねて疑似縁取り*/
/*  -0.5px -0.5px 0 #C3D4EF, /* 左上 */
/*   0.5px -0.5px 0 #C3D4EF, /* 右上 */
/*  -0.5px  0.5px 0 #C3D4EF, /* 左下 */
/*   0.5px  0.5px 0 #C3D4EF; /* 右下 */
  background-color: #fcfbc3;
  border: solid 2px #ff9fcc;
  border-radius: 5px;
}

.gekijoInfo {
  margin: 0 15px;
}

.picWrapper {
  margin: 5px 15px;
}

.togglePic {
  margin: 5px;
  font-size: 1.2rem;
  text-decoration: underline;
}
.togglePic:hover {
  cursor: pointer;
}

.gekijoPic {
  border: solid 5px #000;
  width: 330px;
  height: auto;
}

.hidePic ~ .image {/*後続兄弟結合子*/
  display: none;
}